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

refactor: streamline, refine and polish

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-27 12:35:02 +01:00
parent efe3c81576
commit ee7e5ec06c
21 changed files with 606 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
components/color/ExportMenu.tsx
View File

@@ -118,76 +118,70 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
return (
<div className={className}>
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<h3 className="text-sm font-medium">Export Format</h3>
<Select
value={format}
onValueChange={(value) => setFormat(value as ExportFormat)}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="css">CSS Variables</SelectItem>
<SelectItem value="scss">SCSS Variables</SelectItem>
<SelectItem value="tailwind">Tailwind Config</SelectItem>
<SelectItem value="json">JSON</SelectItem>
<SelectItem value="javascript">JavaScript Array</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-3">
<div className="flex gap-3">
<Select
value={format}
onValueChange={(value) => setFormat(value as ExportFormat)}
>
<SelectTrigger className="flex-1">
<SelectValue placeholder="Format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="css">CSS Variables</SelectItem>
<SelectItem value="scss">SCSS Variables</SelectItem>
<SelectItem value="tailwind">Tailwind Config</SelectItem>
<SelectItem value="json">JSON</SelectItem>
<SelectItem value="javascript">JavaScript Array</SelectItem>
</SelectContent>
</Select>
<div className="space-y-2">
<h3 className="text-sm font-medium">Color Space</h3>
<Select
value={colorSpace}
onValueChange={(value) => setColorSpace(value as ColorSpace)}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select space" />
</SelectTrigger>
<SelectContent>
<SelectItem value="hex">Hex</SelectItem>
<SelectItem value="rgb">RGB</SelectItem>
<SelectItem value="hsl">HSL</SelectItem>
<SelectItem value="lab">Lab</SelectItem>
<SelectItem value="oklab">OkLab</SelectItem>
<SelectItem value="lch">LCH</SelectItem>
<SelectItem value="oklch">OkLCH</SelectItem>
</SelectContent>
</Select>
</div>
<Select
value={colorSpace}
onValueChange={(value) => setColorSpace(value as ColorSpace)}
>
<SelectTrigger className="flex-1">
<SelectValue placeholder="Space" />
</SelectTrigger>
<SelectContent>
<SelectItem value="hex">Hex</SelectItem>
<SelectItem value="rgb">RGB</SelectItem>
<SelectItem value="hsl">HSL</SelectItem>
<SelectItem value="lab">Lab</SelectItem>
<SelectItem value="oklab">OkLab</SelectItem>
<SelectItem value="lch">LCH</SelectItem>
<SelectItem value="oklch">OkLCH</SelectItem>
</SelectContent>
</Select>
</div>
<div className="p-4 bg-muted rounded-lg relative min-h-[100px]">
<div className="p-3 bg-muted/50 rounded-lg relative min-h-[80px]">
{isConverting ? (
<div className="absolute inset-0 flex items-center justify-center bg-muted/50 backdrop-blur-sm rounded-lg z-10">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
</div>
) : null}
<pre className="text-xs overflow-x-auto">
<pre className="text-[11px] overflow-x-auto leading-relaxed">
<code>{getExportContent()}</code>
</pre>
</div>
<div className="flex gap-2 flex-col md:flex-row">
<Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
<div className="flex gap-2">
<Button onClick={handleCopy} variant="outline" size="sm" className="flex-1" disabled={isConverting}>
{copied ? (
<>
<Check className="h-4 w-4 mr-2" />
Copied!
<Check className="h-3.5 w-3.5 mr-1.5" />
Copied
</>
) : (
<>
<Copy className="h-4 w-4 mr-2" />
<Copy className="h-3.5 w-3.5 mr-1.5" />
Copy
</>
)}
</Button>
<Button onClick={handleDownload} variant="default" className="w-full md:flex-1" disabled={isConverting}>
<Download className="h-4 w-4 mr-2" />
<Button onClick={handleDownload} variant="default" size="sm" className="flex-1" disabled={isConverting}>
<Download className="h-3.5 w-3.5 mr-1.5" />
Download
</Button>
</div>