kit-ui/components/animate/ExportPanel.tsx

'use client';

import { useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Copy, Download } from 'lucide-react';
import { toast } from 'sonner';
import { buildCSS, buildTailwindCSS } from '@/lib/animate/cssBuilder';
import type { AnimationConfig } from '@/types/animate';

interface Props {
  config: AnimationConfig;
}

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-3">
      <div className="relative">
        <pre className="p-4 rounded-xl bg-muted/30 border border-border text-xs font-mono leading-relaxed overflow-auto max-h-72 text-foreground/90 whitespace-pre scrollbar">
          <code>{code}</code>
        </pre>
      </div>
      <div className="flex flex-col md:flex-row gap-3">
        <Button variant="outline" onClick={copy} className="w-full md:flex-1">
          <Copy className="h-3.5 w-3.5 mr-1.5" />
          Copy
        </Button>
        <Button onClick={download} className="w-full md:flex-1">
          <Download className="h-3.5 w-3.5 mr-1.5" />
          Download .css
        </Button>
      </div>
    </div>
  );
}

export function ExportPanel({ config }: Props) {
  const css = useMemo(() => buildCSS(config), [config]);
  const tailwind = useMemo(() => buildTailwindCSS(config), [config]);

  return (
    <Card className="h-full">
      <CardHeader>
        <CardTitle>Export</CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="css">
          <TabsList className="mb-4">
            <TabsTrigger value="css" className="text-xs">Plain CSS</TabsTrigger>
            <TabsTrigger value="tailwind" className="text-xs">Tailwind v4</TabsTrigger>
          </TabsList>
          <TabsContent value="css">
            <CodeBlock code={css} filename={`${config.name}.css`} />
          </TabsContent>
          <TabsContent value="tailwind">
            <CodeBlock code={tailwind} filename={`${config.name}.tailwind.css`} />
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}