feat: add media converter app and fix compilation errors

2026-02-25 10:06:50 +01:00
parent 1da6168f37
commit fbc8cdeebe
53 changed files with 3925 additions and 490 deletions
--- a/components/pastel/ColorInfo.tsx
+++ b/components/pastel/ColorInfo.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { ColorInfo as ColorInfoType } from '@/lib/pastel/api/types';
+import { Button } from '@/components/ui/button';
+import { Copy } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils/cn';
+
+interface ColorInfoProps {
+  info: ColorInfoType;
+  className?: string;
+}
+
+export function ColorInfo({ info, className }: ColorInfoProps) {
+  const copyToClipboard = (value: string, label: string) => {
+    navigator.clipboard.writeText(value);
+    toast.success(`Copied ${label} to clipboard`);
+  };
+
+  const formatRgb = (rgb: { r: number; g: number; b: number; a?: number }) => {
+    if (rgb.a !== undefined && rgb.a < 1) {
+      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
+    }
+    return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+  };
+
+  const formatHsl = (hsl: { h: number; s: number; l: number; a?: number }) => {
+    if (hsl.a !== undefined && hsl.a < 1) {
+      return `hsla(${Math.round(hsl.h)}°, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%, ${hsl.a})`;
+    }
+    return `hsl(${Math.round(hsl.h)}°, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`;
+  };
+
+  const formatLab = (lab: { l: number; a: number; b: number }) => {
+    return `lab(${lab.l.toFixed(1)} ${lab.a.toFixed(1)} ${lab.b.toFixed(1)})`;
+  };
+
+  const formatOkLab = (oklab: { l: number; a: number; b: number }) => {
+    return `oklab(${(oklab.l * 100).toFixed(1)}% ${oklab.a.toFixed(3)} ${oklab.b.toFixed(3)})`;
+  };
+
+  const formats = [
+    { label: 'Hex', value: info.hex },
+    { label: 'RGB', value: formatRgb(info.rgb) },
+    { label: 'HSL', value: formatHsl(info.hsl) },
+    { label: 'Lab', value: formatLab(info.lab) },
+    { label: 'OkLab', value: formatOkLab(info.oklab) },
+  ];
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <div className="grid grid-cols-1 gap-3">
+        {formats.map((format) => (
+          <div
+            key={format.label}
+            className="flex items-center justify-between p-3 bg-muted rounded-lg"
+          >
+            <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>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => copyToClipboard(format.value, format.label)}
+              aria-label={`Copy ${format.label} value`}
+            >
+              <Copy className="h-4 w-4" />
+            </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>
+        <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="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>
+        {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>
+  );
+}