refactor: update UI component usage to match latest shadcn APIs

components/figlet/FontSelector.tsx

@@ -2,12 +2,18 @@
 
 import * as React from 'react';
 import Fuse from 'fuse.js';
-import { Input } from '@/components/ui/Input';
-import { Card } from '@/components/ui/Card';
-import { EmptyState } from '@/components/ui/EmptyState';
+import { Input } from '@/components/ui/input';
+import { Card } from '@/components/ui/card';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
 import { Search, X, Heart, Clock, List, Shuffle } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
-import { Button } from '@/components/ui/Button';
+import { Button } from '@/components/ui/button';
 import type { FigletFont } from '@/types/figlet';
 import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites';
 
@@ -162,26 +168,31 @@ export function FontSelector({
         {/* Font List */}
         <div className="flex-1 overflow-y-auto space-y-1 pr-2">
           {filteredFonts.length === 0 ? (
-            <EmptyState
-              icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
-              title={
+            <Empty>
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  {filter === 'favorites' ? <Heart /> : (filter === 'recent' ? <Clock /> : <Search />)}
+                </EmptyMedia>
+                <EmptyTitle>{
                 filter === 'favorites'
                   ? 'No favorite fonts yet'
                   : filter === 'recent'
                   ? 'No recent fonts'
                   : 'No fonts found'
-              }
-              description={
-                filter === 'favorites'
-                  ? 'Click the heart icon on any font to add it to your favorites'
-                  : filter === 'recent'
-                  ? 'Fonts you use will appear here'
-                  : searchQuery
-                  ? 'Try a different search term'
-                  : 'Loading fonts...'
-              }
-              className="py-8"
-            />
+              }</EmptyTitle>
+                <EmptyDescription>
+                  {
+                    filter === 'favorites'
+                      ? 'Click the heart icon on any font to add it to your favorites'
+                      : filter === 'recent'
+                      ? 'Fonts you use will appear here'
+                      : searchQuery
+                      ? 'Try a different search term'
+                      : 'Loading fonts...'
+                  }
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
           ) : (
             filteredFonts.map((font) => (
               <div