Implemented a download function for the circuitJson download button.

package.json

@@ -54,6 +54,7 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tscircuit/3d-viewer": "^0.0.32",
     "@tscircuit/pcb-viewer": "^1.10.5",
+    "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
     "@valtown/codemirror-ts": "^2.2.0",
@@ -65,6 +66,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",

src/components/CodeAndPreview.tsx

@@ -91,6 +91,7 @@ export function CodeAndPreview({ snippet }: Props) {
   return (
     <div className="flex flex-col">
       <EditorNav
+        circuitJson={circuitJson}
         snippet={snippet}
         code={code}
         isSaving={updateSnippetMutation.isLoading}

src/components/DownloadButtonAndMenu.tsx

@@ -7,8 +7,19 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { Download, ChevronDown } from "lucide-react"
+import { downloadCircuitJson } from "@/lib/download-fns/download-circuit-json-fn"
 
-export function DownloadButtonAndMenu({ className }: { className?: string }) {
+interface DownloadButtonAndMenuProps {
+  className?: string
+  fileName: string
+  circuitJson: string
+}
+
+export function DownloadButtonAndMenu({
+  className,
+  fileName,
+  circuitJson,
+}: DownloadButtonAndMenuProps) {
   return (
     <div className={className}>
       <DropdownMenu>
@@ -20,14 +31,12 @@ 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"
+            onSelect={() =>
+              downloadCircuitJson(circuitJson, fileName + ".json")
+            }
+          >
             <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

@@ -24,6 +24,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { useRunTsx } from "@/hooks/use-run-tsx"
 import { OpenInNewWindowIcon } from "@radix-ui/react-icons"
 import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
@@ -34,6 +35,7 @@ import { TypeBadge } from "./TypeBadge"
 import { SnippetLink } from "./SnippetLink"
 
 export default function EditorNav({
+  circuitJson,
   snippet,
   code,
   hasUnsavedChanges,
@@ -42,6 +44,7 @@ export default function EditorNav({
   onSave,
   isSaving,
 }: {
+  circuitJson: any
   snippet: Snippet
   code: string
   hasUnsavedChanges: boolean
@@ -111,7 +114,11 @@ export default function EditorNav({
           <Sparkles className="mr-1 h-3 w-3" />
           Edit with AI
         </Button>
-        <DownloadButtonAndMenu className="hidden md:flex" />
+        <DownloadButtonAndMenu
+          fileName={snippet.unscoped_name}
+          circuitJson={circuitJson}
+          className="hidden md:flex"
+        />
         <Button
           variant="ghost"
           size="sm"

src/lib/download-fns/createBlobURL.ts

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

src/lib/download-fns/download-circuit-json-fn.ts

@@ -0,0 +1,11 @@
+import { saveAs } from "file-saver"
+import { createBlobURL } from "./createBlobURL"
+export const downloadCircuitJson = (content: any, fileName: string) => {
+  try {
+    const circuitJson = JSON.stringify(content, null, 2)
+    const blob = new Blob([circuitJson], { type: "application/json" })
+    saveAs(blob, fileName)
+  } catch (error) {
+    throw error
+  }
+}

src/pages/view-snippet.tsx

@@ -1,5 +1,4 @@
 import { CodeEditor } from "@/components/CodeEditor"
-import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import Header from "@/components/Header"
 import { Button } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -45,7 +44,6 @@ export const ViewSnippetPage = () => {
                 <Share className="mr-1 h-3 w-3" />
                 Copy URL
               </Button>
-              <DownloadButtonAndMenu />
               <div className="flex-grow" />
               <TabsList>
                 <TabsTrigger value="code">Code</TabsTrigger>