84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, useState } from 'react';
|
|
import { Copy, Download } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { cn } from '@/lib/utils/cn';
|
|
import { buildCSS, buildTailwindCSS } from '@/lib/animate/cssBuilder';
|
|
import type { AnimationConfig } from '@/types/animate';
|
|
|
|
interface Props {
|
|
config: AnimationConfig;
|
|
}
|
|
|
|
type ExportTab = 'css' | 'tailwind';
|
|
|
|
const actionBtn =
|
|
'flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all';
|
|
|
|
function CodeBlock({ code, filename }: { code: string; filename: string }) {
|
|
const copy = () => {
|
|
navigator.clipboard.writeText(code);
|
|
toast.success('Copied to clipboard!');
|
|
};
|
|
|
|
const download = () => {
|
|
const blob = new Blob([code], { type: 'text/css' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
toast.success(`Downloaded ${filename}`);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="relative group rounded-xl overflow-hidden border border-white/5" style={{ background: '#06060e' }}>
|
|
<pre className="p-4 overflow-x-auto font-mono text-[11px] text-white/55 leading-relaxed max-h-64 scrollbar">
|
|
<code>{code}</code>
|
|
</pre>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button onClick={copy} className={cn(actionBtn, 'flex-1')}>
|
|
<Copy className="w-3 h-3" />Copy
|
|
</button>
|
|
<button onClick={download} className={cn(actionBtn, 'flex-1')}>
|
|
<Download className="w-3 h-3" />Download .css
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ExportPanel({ config }: Props) {
|
|
const [tab, setTab] = useState<ExportTab>('css');
|
|
const css = useMemo(() => buildCSS(config), [config]);
|
|
const tailwind = useMemo(() => buildTailwindCSS(config), [config]);
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Export</span>
|
|
<div className="flex glass rounded-lg p-0.5 gap-0.5">
|
|
{(['css', 'tailwind'] as ExportTab[]).map((t) => (
|
|
<button
|
|
key={t}
|
|
onClick={() => setTab(t)}
|
|
className={cn(
|
|
'px-2.5 py-1 rounded-md text-[10px] font-mono transition-all',
|
|
tab === t ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
|
|
)}
|
|
>
|
|
{t === 'css' ? 'Plain CSS' : 'Tailwind v4'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{tab === 'css' && <CodeBlock code={css} filename={`${config.name}.css`} />}
|
|
{tab === 'tailwind' && <CodeBlock code={tailwind} filename={`${config.name}.tailwind.css`} />}
|
|
</div>
|
|
);
|
|
}
|