add download button

Author: Juan Castaño

components/ui-builder/download-button.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useState } from 'react';
+import { Download, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { benchifyFileSchema } from '@/lib/schemas';
+import { z } from 'zod';
+import JSZip from 'jszip';
+
+interface DownloadButtonProps {
+    files: z.infer<typeof benchifyFileSchema>;
+    disabled?: boolean;
+    className?: string;
+}
+
+export function DownloadButton({ files, disabled = false, className }: DownloadButtonProps) {
+    const [isDownloading, setIsDownloading] = useState(false);
+
+    const handleDownload = async () => {
+        if (!files.length) return;
+
+        setIsDownloading(true);
+        try {
+            const zip = new JSZip();
+
+            // Add each file to the ZIP
+            files.forEach(file => {
+                zip.file(file.path, file.content);
+            });
+
+            // Generate the ZIP file
+            const content = await zip.generateAsync({ type: 'blob' });
+
+            // Create download link
+            const url = URL.createObjectURL(content);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = 'generated-ui-project.zip';
+            document.body.appendChild(link);
+            link.click();
+
+            // Cleanup
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Error creating download:', error);
+        } finally {
+            setIsDownloading(false);
+        }
+    };
+
+    if (!files.length) return null;
+
+    return (
+        <Button
+            onClick={handleDownload}
+            disabled={disabled || isDownloading}
+            variant="outline"
+            size="sm"
+            className={`flex items-center gap-2 ${className}`}
+        >
+            {isDownloading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+                <Download className="h-4 w-4" />
+            )}
+            {isDownloading ? 'Downloading...' : 'Download Project'}
+        </Button>
+    );
+} 

components/ui-builder/preview-card.tsx

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { benchifyFileSchema } from "@/lib/schemas";
 import { z } from "zod";
 import { CodeEditor } from "./code-editor";
+import { DownloadButton } from "./download-button";
 
 interface Step {
     id: string;
@@ -69,10 +70,17 @@ export function PreviewCard({ previewUrl, code, isGenerating = false, prompt }:
     return (
         <div className="h-full">
             <Tabs defaultValue="preview" className="w-full h-full flex flex-col">
-                <TabsList className="mb-4 self-start">
-                    <TabsTrigger value="preview">Preview</TabsTrigger>
-                    <TabsTrigger value="code">Code</TabsTrigger>
-                </TabsList>
+                <div className="flex items-center justify-between mb-4">
+                    <TabsList>
+                        <TabsTrigger value="preview">Preview</TabsTrigger>
+                        <TabsTrigger value="code">Code</TabsTrigger>
+                    </TabsList>
+
+                    <DownloadButton
+                        files={files}
+                        disabled={isGenerating}
+                    />
+                </div>
 
                 <TabsContent value="preview" className="flex-1 m-0">
                     {isGenerating && prompt ? (

package-lock.json

@@ -25,6 +25,7 @@
     "clsx": "^2.1.1",
     "diff": "^8.0.1",
     "e2b": "^1.5.0",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.510.0",
     "next": "15.3.2",
     "openai": "^4.98.0",
@@ -38,6 +39,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/jszip": "^3.4.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",