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 { 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,11 +57,9 @@ 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">
<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2 space-y-0">
<div className="flex items-center gap-2">
<h3 className="text-sm font-medium">Preview</h3>
<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}
@@ -92,8 +90,8 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
</Button>
)}
</div>
</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">
@@ -159,10 +157,9 @@ export function FontPreview({ text, font, isLoading, onCopy, onDownload, onShare
</button>
</div>
</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>
);
}

13
components/figlet/FontSelector.tsx
View File

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

6
components/units/MainConverter.tsx
View File

@@ -120,7 +120,8 @@ 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">
<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>
@@ -147,7 +148,8 @@ export default function MainConverter() {
</SelectContent>
</Select>
</div>
</div>
</CardContent>
</Card>
{/* Main Converter Card */}
<Card>