Nick:

mendableai · May 26, 2024 · 41c696b · 41c696b
1 parent 26201e4
commit 41c696b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/src/app/embed/page.tsx b/src/app/embed/page.tsx
@@ -8,12 +8,12 @@ function EmbedPageContent() {
   const searchParams = useSearchParams();
   const padding = searchParams?.get("padding") || "64";
   const theme =
-    searchParams?.get("theme") || JSON.stringify(allThemes["firecrawl"]);
+    searchParams?.get("theme") || "firecrawl"
   const background = searchParams?.get("background") || "false";
   const darkMode = searchParams?.get("darkMode") || "false";
 
   const [parsedPadding, setParsedPadding] = useState(0);
-  const [parsedTheme, setParsedTheme] = useState<Theme | null>(null);
+  const [parsedTheme, setParsedTheme] = useState<string>("firecrawl");
   const [parsedBackground, setParsedBackground] = useState(false);
   const [parsedDarkMode, setParsedDarkMode] = useState(false);
   const chartRef = useRef<HTMLDivElement>(null);
@@ -23,12 +23,7 @@ function EmbedPageContent() {
       setParsedPadding(parseInt(padding, 10));
     }
     if (theme) {
-      try {
-        setParsedTheme(JSON.parse(theme) as Theme);
-      } catch (error) {
-        console.error("Failed to parse theme:", error);
-        setParsedTheme(null);
-      }
+        setParsedTheme(theme);
     }
     if (background) {
       setParsedBackground(background === "true");
@@ -42,10 +37,12 @@ function EmbedPageContent() {
     return <div>Loading...</div>;
   }
 
+
   return (
     <Graph
       padding={parsedPadding}
-      theme={parsedTheme}
+      //@ts-ignore
+      theme={allThemes[parsedTheme as keyof typeof allThemes]}
       background={parsedBackground}
       darkMode={parsedDarkMode}
       chartRef={chartRef}

diff --git a/src/app/test-embed/page.tsx b/src/app/test-embed/page.tsx
@@ -0,0 +1,9 @@
+export default function TestEmbed() {
+  return (
+    <iframe
+      src="https://firegraph-xi.vercel.app/embed?padding=32&theme=%7B%22name%22%3A%22firecrawl%22%2C%22gradient%2223A%22linear-gradient(135deg%2C%20%23fdba74%2C%20%23f97316)%22%2C%22startColor%22%3A%22%23fdba74%22%2C%22endColor%22%3A%22%23f97316%22%2C%22color%22%3A%22orange%22%7D&background=true&darkMode=false"
+      style={{ border: "none", width: "100%", height: "400px" }}
+      allowFullScreen
+    ></iframe>
+  );
+}
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -34,7 +34,14 @@ import { SelectIcon } from "@radix-ui/react-select";
 import { toast } from "sonner";
 import { Textarea } from "./ui/textarea";
 import { Input } from "./ui/input";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
 
 export default function Menu({
   padding,
@@ -62,11 +69,7 @@ export default function Menu({
   const generateEmbedCode = () => {
     const embedCode = `
       <iframe
-        src="${
-          window.location.origin
-        }/embed?padding=${padding}&theme=${encodeURIComponent(
-      JSON.stringify(theme)
-    )}&background=${background}&darkMode=${darkMode}"
+        src="${window.location.origin}/embed?padding=${padding}&theme=${theme.name}&background=${background}&darkMode=${darkMode}"
         style="border:none;width:100%;height:400px;"
         allowfullscreen
       ></iframe>
@@ -222,8 +225,15 @@ export default function Menu({
             Export
           </Button>
           <DropdownMenu>
-            <DropdownMenuTrigger style={{ backgroundColor: `${theme.startColor}40` }} className="h-[40px] border-0 w-[32px] p-0 rounded">
-              <ChevronUp size={18} className="mx-auto" color={theme.startColor} />
+            <DropdownMenuTrigger
+              style={{ backgroundColor: `${theme.startColor}40` }}
+              className="h-[40px] border-0 w-[32px] p-0 rounded"
+            >
+              <ChevronUp
+                size={18}
+                className="mx-auto"
+                color={theme.startColor}
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-fit" side="top">
               <DropdownMenuItem onClick={() => generateEmbedCode()}>