feat: add JSON import and export buttons

src/components/JsonEditor.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export const JsonEditor: React.FC<{
   value: string;
@@ -28,5 +28,57 @@ export const JsonEditor: React.FC<{
         ))}
       </ul>
     )}
+    <div className="export-buttons">
+      <button
+        id="import-json-button"
+        onClick={() => {
+          const fileInput = document.createElement("input");
+          fileInput.type = "file";
+          fileInput.accept = "application/json";
+
+          fileInput.onchange = (event) => {
+            const file = (event.target as HTMLInputElement).files?.[0];
+            if (!file) return;
+
+            console.info("Importing JSON from file:", file.name);
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              const text = e.target?.result;
+              if (typeof text === "string") {
+                onChange(text);
+              } else {
+                console.error("Failed to read file as text:", file.name);
+              }
+            };
+            reader.onerror = (e) => {
+              console.error("Error reading file:", e);
+            };
+          };
+          fileInput.click();
+        }}
+      >
+        Import JSON
+      </button>
+      <button
+        id="export-json-button"
+        onClick={() => {
+          const blob = new Blob([value], {
+            type: "application/json",
+          });
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement("a");
+
+          link.href = url;
+          link.download = "graph.json";
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        }}
+      >
+        Export JSON
+      </button>
+    </div>
   </div>
 );