137 lines
3.6 KiB
TypeScript
137 lines
3.6 KiB
TypeScript
'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>
|
|
);
|
|
}
|