valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-25 16:00:10 +01:00
parent 4ccf316184
commit 2fb2eaa54c
3 changed files with 141 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
components/figlet/FontPreview.tsx
View File

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

35
components/figlet/FontSelector.tsx
View File

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

54
components/units/MainConverter.tsx
View File

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