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

feat: unify pastel application into single playground and remove standalone pages

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-26 12:07:21 +01:00
parent 225a9ad7fb
commit 061ea1d806
21 changed files with 519 additions and 2127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
components/pastel/ExportMenu.tsx
View File

@@ -8,8 +8,8 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { useState } from 'react';
import { Download, Copy, Check } from 'lucide-react';
import { useState, useEffect } from 'react';
import { Download, Copy, Check, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import {
exportAsCSS,
@@ -20,6 +20,7 @@ import {
downloadAsFile,
type ExportColor,
} from '@/lib/pastel/utils/export';
import { pastelAPI } from '@/lib/pastel/api/client';
interface ExportMenuProps {
colors: string[];
@@ -27,12 +28,44 @@ interface ExportMenuProps {
}
type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';
export function ExportMenu({ colors, className }: ExportMenuProps) {
const [format, setFormat] = useState<ExportFormat>('css');
const [colorSpace, setColorSpace] = useState<ColorSpace>('hex');
const [convertedColors, setConvertedColors] = useState<string[]>(colors);
const [isConverting, setIsConverting] = useState(false);
const [copied, setCopied] = useState(false);
const exportColors: ExportColor[] = colors.map((hex) => ({ hex }));
useEffect(() => {
async function convertColors() {
if (colorSpace === 'hex') {
setConvertedColors(colors);
return;
}
setIsConverting(true);
try {
const response = await pastelAPI.convertFormat({
colors,
format: colorSpace,
});
if (response.success) {
setConvertedColors(response.data.conversions.map(c => c.output));
}
} catch (error) {
console.error('Failed to convert colors:', error);
toast.error('Failed to convert colors to selected space');
} finally {
setIsConverting(false);
}
}
convertColors();
}, [colors, colorSpace]);
const exportColors: ExportColor[] = convertedColors.map((value) => ({ value }));
const getExportContent = (): string => {
switch (format) {
@@ -86,33 +119,61 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
return (
<div className={className}>
<div className="space-y-4">
<div>
<h3 className="text-sm font-medium mb-2">Export Palette</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 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-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>
</div>
<div className="p-4 bg-muted rounded-lg">
<div className="p-4 bg-muted rounded-lg relative min-h-[100px]">
{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" />
</div>
) : null}
<pre className="text-xs overflow-x-auto">
<code>{getExportContent()}</code>
</pre>
</div>
<div className="flex gap-2">
<Button onClick={handleCopy} variant="outline" className="flex-1">
<div className="flex gap-2 flex-col md:flex-row">
<Button onClick={handleCopy} variant="outline" className="w-full md:flex-1" disabled={isConverting}>
{copied ? (
<>
<Check className="h-4 w-4 mr-2" />
@@ -125,7 +186,7 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
</>
)}
</Button>
<Button onClick={handleDownload} variant="default" className="flex-1">
<Button onClick={handleDownload} variant="default" className="w-full md:flex-1" disabled={isConverting}>
<Download className="h-4 w-4 mr-2" />
Download
</Button>