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

components/figlet/FontPreview.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { toPng } from 'html-to-image';
-import { Card } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
@@ -57,112 +57,109 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
   };
   return (
     <Card className={cn('relative', className)}>
-      <div className="p-6">
-        <div className="space-y-3 mb-4">
-          <div className="flex items-center justify-between flex-wrap gap-2">
-            <div className="flex items-center gap-2">
-              <h3 className="text-sm font-medium">Preview</h3>
-              {font && (
-                <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
-                  {font}
-                </span>
+      <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
+        <div className="flex items-center gap-2">
+          <CardTitle className="text-sm font-medium">Preview</CardTitle>
+          {font && (
+            <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
+              {font}
+            </span>
+          )}
+        </div>
+        <div className="flex gap-2 flex-wrap">
+          {onCopy && (
+            <Button variant="outline" size="sm" onClick={onCopy}>
+              <Copy className="h-3 w-3 mr-2" />
+              Copy
+            </Button>
+          )}
+          {onShare && (
+            <Button variant="outline" size="sm" onClick={onShare} title="Copy shareable URL">
+              <Share2 className="h-3 w-3 mr-2" />
+              Share
+            </Button>
+          )}
+          <Button variant="outline" size="sm" onClick={handleExportPNG} title="Export as PNG">
+            <ImageIcon className="h-3 w-3 mr-2" />
+            PNG
+          </Button>
+          {onDownload && (
+            <Button variant="outline" size="sm" onClick={onDownload}>
+              <Download className="h-3 w-3 mr-2" />
+              TXT
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Controls */}
+        <div className="flex items-center gap-2 flex-wrap">
+          <div className="flex items-center gap-1 border rounded-md p-1">
+            <button
+              onClick={() => setTextAlign('left')}
+              className={cn(
+                'p-1.5 rounded transition-colors',
+                textAlign === 'left' ? 'bg-accent' : 'hover:bg-accent/50'
               )}
-            </div>
-            <div className="flex gap-2 flex-wrap">
-              {onCopy && (
-                <Button variant="outline" size="sm" onClick={onCopy}>
-                  <Copy className="h-3 w-3 mr-2" />
-                  Copy
-                </Button>
+              title="Align left"
+            >
+              <AlignLeft className="h-3.5 w-3.5" />
+            </button>
+            <button
+              onClick={() => setTextAlign('center')}
+              className={cn(
+                'p-1.5 rounded transition-colors',
+                textAlign === 'center' ? 'bg-accent' : 'hover:bg-accent/50'
               )}
-              {onShare && (
-                <Button variant="outline" size="sm" onClick={onShare} title="Copy shareable URL">
-                  <Share2 className="h-3 w-3 mr-2" />
-                  Share
-                </Button>
+              title="Align center"
+            >
+              <AlignCenter className="h-3.5 w-3.5" />
+            </button>
+            <button
+              onClick={() => setTextAlign('right')}
+              className={cn(
+                'p-1.5 rounded transition-colors',
+                textAlign === 'right' ? 'bg-accent' : 'hover:bg-accent/50'
               )}
-              <Button variant="outline" size="sm" onClick={handleExportPNG} title="Export as PNG">
-                <ImageIcon className="h-3 w-3 mr-2" />
-                PNG
-              </Button>
-              {onDownload && (
-                <Button variant="outline" size="sm" onClick={onDownload}>
-                  <Download className="h-3 w-3 mr-2" />
-                  TXT
-                </Button>
-              )}
-            </div>
+              title="Align right"
+            >
+              <AlignRight className="h-3.5 w-3.5" />
+            </button>
           </div>
 
-          {/* Controls */}
-          <div className="flex items-center gap-2 flex-wrap">
-            <div className="flex items-center gap-1 border rounded-md p-1">
-              <button
-                onClick={() => setTextAlign('left')}
-                className={cn(
-                  'p-1.5 rounded transition-colors',
-                  textAlign === 'left' ? 'bg-accent' : 'hover:bg-accent/50'
-                )}
-                title="Align left"
-              >
-                <AlignLeft className="h-3.5 w-3.5" />
-              </button>
-              <button
-                onClick={() => setTextAlign('center')}
-                className={cn(
-                  'p-1.5 rounded transition-colors',
-                  textAlign === 'center' ? 'bg-accent' : 'hover:bg-accent/50'
-                )}
-                title="Align center"
-              >
-                <AlignCenter className="h-3.5 w-3.5" />
-              </button>
-              <button
-                onClick={() => setTextAlign('right')}
-                className={cn(
-                  'p-1.5 rounded transition-colors',
-                  textAlign === 'right' ? 'bg-accent' : 'hover:bg-accent/50'
-                )}
-                title="Align right"
-              >
-                <AlignRight className="h-3.5 w-3.5" />
-              </button>
-            </div>
-
-            <div className="flex items-center gap-1 border rounded-md p-1">
-              <button
-                onClick={() => setFontSize('xs')}
-                className={cn(
-                  'px-2 py-1 text-xs rounded transition-colors',
-                  fontSize === 'xs' ? 'bg-accent' : 'hover:bg-accent/50'
-                )}
-              >
-                XS
-              </button>
-              <button
-                onClick={() => setFontSize('sm')}
-                className={cn(
-                  'px-2 py-1 text-xs rounded transition-colors',
-                  fontSize === 'sm' ? 'bg-accent' : 'hover:bg-accent/50'
-                )}
-              >
-                SM
-              </button>
-              <button
-                onClick={() => setFontSize('base')}
-                className={cn(
-                  'px-2 py-1 text-xs rounded transition-colors',
-                  fontSize === 'base' ? 'bg-accent' : 'hover:bg-accent/50'
-                )}
-              >
-                MD
-              </button>
-            </div>
+          <div className="flex items-center gap-1 border rounded-md p-1">
+            <button
+              onClick={() => setFontSize('xs')}
+              className={cn(
+                'px-2 py-1 text-xs rounded transition-colors',
+                fontSize === 'xs' ? 'bg-accent' : 'hover:bg-accent/50'
+              )}
+            >
+              XS
+            </button>
+            <button
+              onClick={() => setFontSize('sm')}
+              className={cn(
+                'px-2 py-1 text-xs rounded transition-colors',
+                fontSize === 'sm' ? 'bg-accent' : 'hover:bg-accent/50'
+              )}
+            >
+              SM
+            </button>
+            <button
+              onClick={() => setFontSize('base')}
+              className={cn(
+                'px-2 py-1 text-xs rounded transition-colors',
+                fontSize === 'base' ? 'bg-accent' : 'hover:bg-accent/50'
+              )}
+            >
+              MD
+            </button>
           </div>
         </div>
 
         {!isLoading && text && (
-          <div className="flex gap-4 mb-2 text-xs text-muted-foreground">
+          <div className="flex gap-4 text-xs text-muted-foreground">
             <span>{lineCount} lines</span>
             <span>•</span>
             <span>{charCount} chars</span>
@@ -207,7 +204,7 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
             </Empty>
           )}
         </div>
-      </div>
+      </CardContent>
     </Card>
   );
 }

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>
   );
 }

components/units/MainConverter.tsx

@@ -120,34 +120,36 @@ export default function MainConverter() {
     <div className="w-full space-y-8">
 
       {/* Quick Access Row */}
-      <div className="flex flex-col md:flex-row md:items-center gap-4 justify-between bg-card p-4 rounded-lg border">
-        <div className="flex-1">
-          <SearchUnits onSelectUnit={handleSearchSelect} />
-        </div>
+      <Card>
+        <CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between pt-6">
+          <div className="flex-1">
+            <SearchUnits onSelectUnit={handleSearchSelect} />
+          </div>
 
-        <div className="w-full md:w-64 shrink-0">
-          <Select
-            value={selectedMeasure}
-            onValueChange={(value) => setSelectedMeasure(value as Measure)}
-          >
-            <SelectTrigger
-              className="w-full"
-              style={{
-                borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
-              }}
+          <div className="w-full md:w-64 shrink-0">
+            <Select
+              value={selectedMeasure}
+              onValueChange={(value) => setSelectedMeasure(value as Measure)}
             >
-              <SelectValue placeholder="Measure" />
-            </SelectTrigger>
-            <SelectContent>
-              {measures.map((measure) => (
-                <SelectItem key={measure} value={measure}>
-                  {formatMeasureName(measure)}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
+              <SelectTrigger
+                className="w-full"
+                style={{
+                  borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
+                }}
+              >
+                <SelectValue placeholder="Measure" />
+              </SelectTrigger>
+              <SelectContent>
+                {measures.map((measure) => (
+                  <SelectItem key={measure} value={measure}>
+                    {formatMeasureName(measure)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
 
       {/* Main Converter Card */}
       <Card>