refactor: use Card, CardTitle and CardContent in Figlet and Units apps

components/figlet/FontSelector.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import Fuse from 'fuse.js';
 import { Input } from '@/components/ui/input';
-import { Card } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   Empty,
   EmptyDescription,
@@ -93,22 +93,21 @@ export function FontSelector({
 
   return (
     <Card className={cn("flex flex-col min-h-0 overflow-hidden", className)}>
-      <div className="p-6 flex flex-col flex-1 min-h-0">
-        <div className="flex items-center justify-between mb-4 shrink-0">
-          <h3 className="text-sm font-medium">Select Font</h3>
-          {onRandomFont && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={onRandomFont}
-              title="Random font"
-            >
-              <Shuffle className="h-3 w-3 mr-2" />
-              Random
-            </Button>
-          )}
-        </div>
-
+      <CardHeader className="flex flex-row items-center justify-between shrink-0 space-y-0">
+        <CardTitle className="text-sm font-medium">Select Font</CardTitle>
+        {onRandomFont && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onRandomFont}
+            title="Random font"
+          >
+            <Shuffle className="h-3 w-3 mr-2" />
+            Random
+          </Button>
+        )}
+      </CardHeader>
+      <CardContent className="flex flex-col flex-1 min-h-0 pt-0">
         {/* Filter Tabs */}
         <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg shrink-0">
           <button
@@ -232,7 +231,7 @@ export function FontSelector({
           {filter === 'favorites' && ` • ${favorites.length} total favorites`}
           {filter === 'recent' && ` • ${recentFonts.length} recent`}
         </div>
-      </div>
+      </CardContent>
     </Card>
   );
 }