feat: add download button

frontend/components/editor/navbar/downloadButton.tsx

@@ -0,0 +1,33 @@
+import JSZip from 'jszip'
+import { useSocket } from "@/context/SocketContext"
+import { Button } from "@/components/ui/button"
+import { Download } from "lucide-react"
+
+export default function DownloadButton() {
+  const { socket } = useSocket()
+
+  const handleDownload = async () => {
+    socket?.emit("downloadFiles", {}, async (response: {files: {path: string, content: string}[]}) => {
+      const zip = new JSZip()
+      
+      response.files.forEach(file => {
+        zip.file(file.path, file.content)
+      })
+      
+      const blob = await zip.generateAsync({type: "blob"})
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'sandbox-files.zip'
+      a.click()
+      window.URL.revokeObjectURL(url)
+    })
+  }
+
+  return (
+    <Button variant="outline" onClick={handleDownload}>
+      <Download className="w-4 h-4 mr-2" />
+      Download
+    </Button>
+  )
+}

frontend/components/editor/navbar/index.tsx

@@ -14,6 +14,7 @@ import DeployButtonModal from "./deploy"
 import EditSandboxModal from "./edit"
 import RunButtonModal from "./run"
 import ShareSandboxModal from "./share"
+import DownloadButton from "./downloadButton"
 
 export default function Navbar({
   userData,
@@ -78,6 +79,7 @@ export default function Navbar({
                 <Users className="w-4 h-4 mr-2" />
                 Share
               </Button>
+              <DownloadButton />
             </>
           ) : null}
           <ThemeSwitcher />