Feat: Download JSON button added

package.json

@@ -65,6 +65,7 @@
     "easyeda": "^0.0.32",
     "embla-carousel-react": "^8.3.0",
     "fflate": "^0.8.2",
+    "file-saver": "^2.0.5",
     "immer": "^10.1.1",
     "input-otp": "^1.2.4",
     "jose": "^5.9.3",
@@ -92,6 +93,7 @@
     "@tscircuit/prompt-benchmarks": "^0.0.14",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
+    "@types/file-saver": "^2.0.7",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",

src/components/DownloadButtonAndMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7,8 +6,22 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { Download, ChevronDown } from "lucide-react"
+import { saveAs } from "file-saver"
+import { createBlobURL } from "@/lib/createBlobURL"
 
-export function DownloadButtonAndMenu({ className }: { className?: string }) {
+export function DownloadButtonAndMenu({
+  className,
+  circuitJson,
+  fileName,
+}: {
+  className?: string
+  circuitJson?: string
+  fileName?: string
+}) {
+  const handleDownloadClick = () => {
+    const blob = createBlobURL(circuitJson as string)
+    saveAs(blob, `${fileName}.json`)
+  }
   return (
     <div className={className}>
       <DropdownMenu>
@@ -20,14 +33,7 @@ export function DownloadButtonAndMenu({ className }: { className?: string }) {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent>
-          <DropdownMenuItem className="text-xs">
-            <Download className="mr-1 h-3 w-3" />
-            <span className="flex-grow mr-6">Download TSX</span>
-            <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
-              tsx
-            </span>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem className="text-xs" onClick={handleDownloadClick}>
             <Download className="mr-1 h-3 w-3" />
             <span className="flex-grow mr-6">Download Circuit JSON</span>
             <span className="text-[0.6rem] opacity-80 bg-blue-500 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">

src/components/EditorNav.tsx

@@ -27,7 +27,7 @@ import {
 import { OpenInNewWindowIcon } from "@radix-ui/react-icons"
 import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
-import { useState, useEffect } from "react"
+import { useRunTsx } from "@/hooks/use-run-tsx"
 import { cn } from "@/lib/utils"
 import { DownloadButtonAndMenu } from "./DownloadButtonAndMenu"
 import { TypeBadge } from "./TypeBadge"
@@ -51,6 +51,12 @@ export default function EditorNav({
   onSave: () => void
 }) {
   const [, navigate] = useLocation()
+
+  const { circuitJson, message } = useRunTsx(
+    snippet?.code ?? "",
+    snippet?.snippet_type,
+  )
+
   return (
     <nav className="flex items-center justify-between px-2 py-3 border-b border-gray-200 bg-white text-sm border-t">
       <div className="flex items-center space-x-1">
@@ -111,7 +117,11 @@ export default function EditorNav({
           <Sparkles className="mr-1 h-3 w-3" />
           Edit with AI
         </Button>
-        <DownloadButtonAndMenu className="hidden md:flex" />
+        <DownloadButtonAndMenu
+          className="hidden md:flex"
+          circuitJson={JSON.stringify(circuitJson)}
+          fileName={snippet?.name}
+        />
         <Button
           variant="ghost"
           size="sm"

src/lib/createBlobURL.ts

@@ -0,0 +1,4 @@
+export const createBlobURL = (content: string) => {
+  const blob = new Blob([content], { type: "text/plain" })
+  return URL.createObjectURL(blob)
+}