Feat: Download JSON button added

src/components/CodeAndPreview.tsx

@@ -41,6 +41,7 @@ export function CodeAndPreview({ snippet }: Props) {
   const { toast } = useToast()
 
   const { message, circuitJson } = useRunTsx(code, snippet?.snippet_type)
+
   const qc = useQueryClient()
 
   const updateSnippetMutation = useMutation({

src/components/DownloadButtonAndMenu.tsx

@@ -1,4 +1,3 @@
-import React from "react"
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7,8 +6,18 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { Download, ChevronDown } from "lucide-react"
+import { useDownloadJSON } from "@/hooks/use-download-json"
 
 export function DownloadButtonAndMenu({ className }: { className?: string }) {
+  const createBlobURL = (content: string) => {
+    const blob = new Blob([content], { type: "text/plain" })
+    return URL.createObjectURL(blob)
+  }
+
+  const { jsonContent, jsonFileName } = useDownloadJSON()
+
+  const downloadJson = createBlobURL(jsonContent)
+
   return (
     <div className={className}>
       <DropdownMenu>
@@ -21,18 +30,18 @@ export function DownloadButtonAndMenu({ className }: { className?: string }) {
         </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">
-            <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">
-              json
-            </span>
+            <a
+              href={downloadJson}
+              download={jsonFileName}
+              target="_blank"
+              className="flex items-center w-full"
+            >
+              <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">
+                json
+              </span>
+            </a>
           </DropdownMenuItem>
           <DropdownMenuItem className="text-xs">
             <Download className="mr-1 h-3 w-3" />

src/hooks/use-download-json.ts

@@ -0,0 +1,25 @@
+import { useCurrentSnippetId } from "@/hooks/use-current-snippet-id"
+import { useSnippet } from "@/hooks/use-snippet"
+import { useMemo, useState } from "react"
+import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { useRunTsx } from "@/hooks/use-run-tsx"
+
+export const useDownloadJSON = () => {
+  const snippetId = useCurrentSnippetId()
+  const { data: snippet, isLoading } = useSnippet(snippetId)
+
+  const defaultCode = useMemo(() => {
+    return decodeUrlHashToText(window.location.toString()) ?? snippet?.code
+  }, [])
+
+  const [code, setCode] = useState(defaultCode ?? "")
+
+  const { message, circuitJson } = useRunTsx(code, snippet?.snippet_type)
+
+  const stringifiedCircuitJson = JSON.stringify(circuitJson, null, 2)
+
+  return {
+    jsonContent: stringifiedCircuitJson,
+    jsonFileName: `${snippet?.name}.json`,
+  }
+}