feat: add media converter app and fix compilation errors

components/pastel/ExportMenu.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useState } from 'react';
+import { Download, Copy, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  exportAsCSS,
+  exportAsSCSS,
+  exportAsTailwind,
+  exportAsJSON,
+  exportAsJavaScript,
+  downloadAsFile,
+  type ExportColor,
+} from '@/lib/pastel/utils/export';
+
+interface ExportMenuProps {
+  colors: string[];
+  className?: string;
+}
+
+type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
+
+export function ExportMenu({ colors, className }: ExportMenuProps) {
+  const [format, setFormat] = useState<ExportFormat>('css');
+  const [copied, setCopied] = useState(false);
+
+  const exportColors: ExportColor[] = colors.map((hex) => ({ hex }));
+
+  const getExportContent = (): string => {
+    switch (format) {
+      case 'css':
+        return exportAsCSS(exportColors);
+      case 'scss':
+        return exportAsSCSS(exportColors);
+      case 'tailwind':
+        return exportAsTailwind(exportColors);
+      case 'json':
+        return exportAsJSON(exportColors);
+      case 'javascript':
+        return exportAsJavaScript(exportColors);
+    }
+  };
+
+  const getFileExtension = (): string => {
+    switch (format) {
+      case 'css':
+        return 'css';
+      case 'scss':
+        return 'scss';
+      case 'tailwind':
+        return 'js';
+      case 'json':
+        return 'json';
+      case 'javascript':
+        return 'js';
+    }
+  };
+
+  const handleCopy = () => {
+    const content = getExportContent();
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    toast.success('Copied to clipboard!');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleDownload = () => {
+    const content = getExportContent();
+    const extension = getFileExtension();
+    downloadAsFile(content, `palette.${extension}`, 'text/plain');
+    toast.success('Downloaded!');
+  };
+
+  if (colors.length === 0) {
+    return null;
+  }
+
+  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>
+
+        <div className="p-4 bg-muted rounded-lg">
+          <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">
+            {copied ? (
+              <>
+                <Check className="h-4 w-4 mr-2" />
+                Copied!
+              </>
+            ) : (
+              <>
+                <Copy className="h-4 w-4 mr-2" />
+                Copy
+              </>
+            )}
+          </Button>
+          <Button onClick={handleDownload} variant="default" className="flex-1">
+            <Download className="h-4 w-4 mr-2" />
+            Download
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}