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

43
components/color/ColorInfo.tsx
View File

@@ -48,48 +48,43 @@ export function ColorInfo({ info, className }: ColorInfoProps) {
];
return (
<div className={cn('space-y-4', className)}>
<div className="grid grid-cols-1 gap-3">
<div className={cn('space-y-3', className)}>
<div className="grid grid-cols-1 gap-1.5">
{formats.map((format) => (
<div
key={format.label}
className="flex items-center justify-between p-3 bg-muted rounded-lg"
className="flex items-center justify-between px-3 py-2 bg-muted/50 rounded-md group"
>
<div className="flex-1">
<div className="text-xs text-muted-foreground mb-1">{format.label}</div>
<div className="font-mono text-sm">{format.value}</div>
<div className="flex items-baseline gap-2 min-w-0 flex-1">
<span className="text-[10px] uppercase tracking-wider text-muted-foreground w-10 shrink-0">{format.label}</span>
<span className="font-mono text-xs truncate">{format.value}</span>
</div>
<Button
size="icon"
size="icon-xs"
variant="ghost"
onClick={() => copyToClipboard(format.value, format.label)}
aria-label={`Copy ${format.label} value`}
className="opacity-0 group-hover:opacity-100 transition-opacity"
>
<Copy className="h-4 w-4" />
<Copy className="h-3 w-3" />
</Button>
</div>
))}
</div>
<div className="grid grid-cols-2 gap-3 pt-2 border-t">
<div className="space-y-1">
<div className="text-xs text-muted-foreground">Brightness</div>
<div className="text-sm font-medium">{(info.brightness * 100).toFixed(1)}%</div>
<div className="grid grid-cols-3 gap-3 pt-2 border-t text-xs">
<div>
<div className="text-muted-foreground mb-0.5">Brightness</div>
<div className="font-medium">{(info.brightness * 100).toFixed(1)}%</div>
</div>
<div className="space-y-1">
<div className="text-xs text-muted-foreground">Luminance</div>
<div className="text-sm font-medium">{(info.luminance * 100).toFixed(1)}%</div>
<div>
<div className="text-muted-foreground mb-0.5">Luminance</div>
<div className="font-medium">{(info.luminance * 100).toFixed(1)}%</div>
</div>
<div className="space-y-1">
<div className="text-xs text-muted-foreground">Type</div>
<div className="text-sm font-medium">{info.is_light ? 'Light' : 'Dark'}</div>
<div>
<div className="text-muted-foreground mb-0.5">{info.name && typeof info.name === 'string' ? 'Name' : 'Type'}</div>
<div className="font-medium">{info.name && typeof info.name === 'string' ? info.name : (info.is_light ? 'Light' : 'Dark')}</div>
</div>
{info.name && typeof info.name === 'string' && (
<div className="space-y-1">
<div className="text-xs text-muted-foreground">Named</div>
<div className="text-sm font-medium">{info.name}</div>
</div>
)}
</div>
</div>
);