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

17
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,11 +57,9 @@ 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 justify-between flex-wrap gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h3 className="text-sm font-medium">Preview</h3> <CardTitle className="text-sm font-medium">Preview</CardTitle>
{font && ( {font && (
<span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono"> <span className="text-xs px-2 py-0.5 bg-primary/10 text-primary rounded-md font-mono">
{font} {font}
@@ -92,8 +90,8 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
</Button> </Button>
)} )}
</div> </div>
</div> </CardHeader>
<CardContent className="space-y-4">
{/* Controls */} {/* Controls */}
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<div className="flex items-center gap-1 border rounded-md p-1"> <div className="flex items-center gap-1 border rounded-md p-1">
@@ -159,10 +157,9 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
</button> </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>
); );
} }

13
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,9 +93,8 @@ 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"
@@ -107,8 +106,8 @@ export function FontSelector({
Random Random
</Button> </Button>
)} )}
</div> </CardHeader>
<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>
); );
} }

6
components/units/MainConverter.tsx
View File

@@ -120,7 +120,8 @@ 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>
<CardContent className="flex flex-col md:flex-row md:items-center gap-4 justify-between pt-6">
<div className="flex-1"> <div className="flex-1">
<SearchUnits onSelectUnit={handleSearchSelect} /> <SearchUnits onSelectUnit={handleSearchSelect} />
</div> </div>
@@ -147,7 +148,8 @@ export default function MainConverter() {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div> </CardContent>
</Card>
{/* Main Converter Card */} {/* Main Converter Card */}
<Card> <Card>