feat: monorepo

surfsense_web/components/json-metadata-viewer.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { FileJson } from "lucide-react";
+import { JsonView, defaultStyles } from "react-json-view-lite";
+import "react-json-view-lite/dist/index.css";
+
+interface JsonMetadataViewerProps {
+  title: string;
+  metadata: any;
+  trigger?: React.ReactNode;
+}
+
+export function JsonMetadataViewer({ title, metadata, trigger }: JsonMetadataViewerProps) {
+  // Ensure metadata is a valid object
+  const jsonData = React.useMemo(() => {
+    if (!metadata) return {};
+    
+    try {
+      // If metadata is a string, try to parse it
+      if (typeof metadata === "string") {
+        return JSON.parse(metadata);
+      }
+      // Otherwise, use it as is
+      return metadata;
+    } catch (error) {
+      console.error("Error parsing JSON metadata:", error);
+      return { error: "Invalid JSON metadata" };
+    }
+  }, [metadata]);
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="ghost" size="sm" className="flex items-center gap-1">
+            <FileJson size={16} />
+            <span>View Metadata</span>
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{title} - Metadata</DialogTitle>
+        </DialogHeader>
+        <div className="mt-4 p-4 bg-muted/30 rounded-md">
+          <JsonView 
+            data={jsonData} 
+            style={defaultStyles}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}