kit-ui/components/animate/ExportPanel.tsx

'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">
          <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>
  );
}