From 0f76cb4ff0e3bb8309b743840fe8d13abb35bf11 Mon Sep 17 00:00:00 2001
From: Eric Ciarla <ericciarla@yahoo.com>
Date: Mon, 27 May 2024 18:17:40 -0400
Subject: [PATCH] Update client errors

---
 src/components/data-input.tsx | 328 +++++++++++++++++----------------
 src/components/graph.tsx      | 157 ++++++++--------
 src/components/main.tsx       |  43 ++---
 src/components/menu.tsx       | 338 +++++++++++++++++-----------------
 4 files changed, 440 insertions(+), 426 deletions(-)

diff --git a/src/components/data-input.tsx b/src/components/data-input.tsx
index a060a5c..9c36560 100644
--- a/src/components/data-input.tsx
+++ b/src/components/data-input.tsx
@@ -47,172 +47,184 @@ export default function DataInput({
     setIsClient(true);
   }, []);
   return (
-    <div
-      className={`${
-        window.innerHeight < 700 ? "mt-2" : "mt-8 md:mt-8 xl:mt-12"
-      } mb-0 md:mb-8 xl:mb-12 flex flex-col items-start rounded-lg px-4`}
-    >
-      <p className="text-zinc-700 mx-auto mb-1 text-sm">
-        Choose data you want to visualize
-      </p>
-      <div className="mt-1 flex flex-row items-center rounded-lg gap-4">
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger asChild>
-            <Button className="bg-black text-white px-3 py-2 rounded hover:bg-zinc-700/75">
-              <Github size={16} className="mr-1" />
-              GitHub stars
-            </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Enter GitHub URL</DialogTitle>
-              <DialogDescription>
-                Please enter the GitHub repository URL to fetch stars data.
-              </DialogDescription>
-            </DialogHeader>
-            <Input
-              type="text"
-              className="w-full p-2 border border-gray-300 rounded"
-              placeholder="https://github.com/user/repo"
-              value={repoUrl}
-              onChange={(e) => setRepoUrl(e.target.value)}
-            />
-            <div className="flex justify-end space-x-2 mt-4">
-              <Button variant="outline">Cancel</Button>
-              <Button
-                onClick={async () => {
-                  const token = process.env.GITHUB_TOKEN;
+    <div>
+      {typeof window !== "undefined" && (
+        <div
+          className={`${
+            window.innerHeight < 700 ? "mt-2" : "mt-8 md:mt-8 xl:mt-12"
+          } mb-0 md:mb-8 xl:mb-12 flex flex-col items-start rounded-lg px-4`}
+        >
+          <p className="text-zinc-700 mx-auto mb-1 text-sm">
+            Choose data you want to visualize
+          </p>
 
-                  if (token && repoUrl) {
-                    try {
-                      const response = await fetch(
-                        `/api/githubStars?repo=${encodeURIComponent(
-                          repoUrl
-                        )}&token=${encodeURIComponent(token)}`
-                      );
-                      if (!response.ok) {
-                        throw new Error(`Error: ${response.statusText}`);
+          <div className="mt-1 flex flex-row items-center rounded-lg gap-4">
+            <Dialog open={open} onOpenChange={setOpen}>
+              <DialogTrigger asChild>
+                <Button className="bg-black text-white px-3 py-2 rounded hover:bg-zinc-700/75">
+                  <Github size={16} className="mr-1" />
+                  GitHub stars
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Enter GitHub URL</DialogTitle>
+                  <DialogDescription>
+                    Please enter the GitHub repository URL to fetch stars data.
+                  </DialogDescription>
+                </DialogHeader>
+                <Input
+                  type="text"
+                  className="w-full p-2 border border-gray-300 rounded"
+                  placeholder="https://github.com/user/repo"
+                  value={repoUrl}
+                  onChange={(e) => setRepoUrl(e.target.value)}
+                />
+                <div className="flex justify-end space-x-2 mt-4">
+                  <Button variant="outline">Cancel</Button>
+                  <Button
+                    onClick={async () => {
+                      const token = process.env.GITHUB_TOKEN;
+
+                      if (token && repoUrl) {
+                        try {
+                          const response = await fetch(
+                            `/api/githubStars?repo=${encodeURIComponent(
+                              repoUrl
+                            )}&token=${encodeURIComponent(token)}`
+                          );
+                          if (!response.ok) {
+                            throw new Error(`Error: ${response.statusText}`);
+                          }
+                          const data = await response.json();
+                          console.log("GitHub Stars Data:", data);
+                          setXName("Date");
+                          setYName("Stars");
+                          setChartData(data);
+                          setGraphTitle(`${repoUrl} Stars`);
+                          setOpen(false);
+                        } catch (error) {
+                          console.error(
+                            "Failed to fetch GitHub stars data:",
+                            error
+                          );
+                          alert(
+                            "Failed to fetch GitHub stars data. Please check the console for more details."
+                          );
+                        }
                       }
-                      const data = await response.json();
-                      console.log("GitHub Stars Data:", data);
-                      setXName("Date");
-                      setYName("Stars");
-                      setChartData(data);
-                      setGraphTitle(`${repoUrl} Stars`);
-                      setOpen(false);
-                    } catch (error) {
-                      console.error(
-                        "Failed to fetch GitHub stars data:",
-                        error
-                      );
-                      alert(
-                        "Failed to fetch GitHub stars data. Please check the console for more details."
-                      );
-                    }
-                  }
-                }}
-              >
-                Submit
-              </Button>
-            </div>
-          </DialogContent>
-        </Dialog>
-        <Dialog open={openCsv} onOpenChange={setOpenCsv}>
-          <DialogTrigger asChild>
-            <Button
-              variant={"outline"}
-              className="px-3 py-2 rounded hover:bg-zinc-700/10"
-            >
-              <FileIcon size={16} className="mr-1" />
-              CSV
-            </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Paste CSV Data</DialogTitle>
-              <DialogDescription>
-                Please paste your CSV data or upload a CSV file. <br />
-                <strong>Make sure you have only 2 columns (X, Y)</strong>
-              </DialogDescription>
-            </DialogHeader>
-            <Textarea
-              className="w-full p-2 border border-gray-300 rounded"
-              rows={5}
-              placeholder={`Gear, Speed
+                    }}
+                  >
+                    Submit
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+            <Dialog open={openCsv} onOpenChange={setOpenCsv}>
+              <DialogTrigger asChild>
+                <Button
+                  variant={"outline"}
+                  className="px-3 py-2 rounded hover:bg-zinc-700/10"
+                >
+                  <FileIcon size={16} className="mr-1" />
+                  CSV
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Paste CSV Data</DialogTitle>
+                  <DialogDescription>
+                    Please paste your CSV data or upload a CSV file. <br />
+                    <strong>Make sure you have only 2 columns (X, Y)</strong>
+                  </DialogDescription>
+                </DialogHeader>
+                <Textarea
+                  className="w-full p-2 border border-gray-300 rounded"
+                  rows={5}
+                  placeholder={`Gear, Speed
 1,0
 2,480
 3,750..
 `}
-              value={pastedCsvData}
-              onChange={(e) => setPastedCsvData(e.target.value)}
-            ></Textarea>
-            <Input
-              type="file"
-              accept=".csv"
-              className="w-full p-2 border border-gray-300 rounded mt-2"
-              onChange={(e) => {
-                const file = e.target.files![0];
-                const reader = new FileReader();
-                reader.onload = (e: any) => {
-                  setPastedCsvData(e.target.result);
-                };
-                reader.readAsText(file);
-              }}
-              // close the dialog after file is uploaded
-            />
-            <div className="flex justify-end space-x-2 mt-4">
-              <Button variant="outline">Cancel</Button>
-              <Button
-                onClick={() => {
-                  console.log(pastedCsvData);
-                  const [header, ...rows] = pastedCsvData.split("\n");
-                  const [key, value] = header.split(",");
-
-                  // Check if any value in the key or value column is a date
-                  const isDate = (str: string) =>
-                    isNaN(Date.parse(str)) === false && isNaN(Number(str));
-                  const containsDate = rows.some((row: any) => {
-                    const [keyValue, valueValue] = row.split(",");
-                    return isDate(keyValue) || isDate(valueValue);
-                  });
-
-                  const parsedData = rows.map((row: any) => {
-                    let [keyValue, valueValue] = row.split(",");
-                    if (containsDate) {
-                      if (isDate(keyValue))
-                        keyValue = new Date(keyValue).toLocaleDateString(
-                          "en-US",
-                          { year: "numeric", month: "short", day: "numeric" }
-                        );
-                      if (isDate(valueValue))
-                        valueValue = new Date(valueValue).toLocaleDateString(
-                          "en-US",
-                          { year: "numeric", month: "short", day: "numeric" }
-                        );
-                    }
-                    return {
-                      [key]: keyValue,
-                      [value]: isNaN(Number(valueValue))
-                        ? valueValue
-                        : Number(valueValue),
+                  value={pastedCsvData}
+                  onChange={(e) => setPastedCsvData(e.target.value)}
+                ></Textarea>
+                <Input
+                  type="file"
+                  accept=".csv"
+                  className="w-full p-2 border border-gray-300 rounded mt-2"
+                  onChange={(e) => {
+                    const file = e.target.files![0];
+                    const reader = new FileReader();
+                    reader.onload = (e: any) => {
+                      setPastedCsvData(e.target.result);
                     };
-                  });
-                  // print the new formatted data
-                  console.log(parsedData);
-                  setChartData(parsedData);
-                  setXName(key);
-                  setYName(value);
-                  setGraphTitle(`Firegraph🔥`);
+                    reader.readAsText(file);
+                  }}
                   // close the dialog after file is uploaded
-                  setOpenCsv(false);
-                }}
-              >
-                Submit
-              </Button>
-            </div>
-          </DialogContent>
-        </Dialog>
-      </div>
+                />
+                <div className="flex justify-end space-x-2 mt-4">
+                  <Button variant="outline">Cancel</Button>
+                  <Button
+                    onClick={() => {
+                      console.log(pastedCsvData);
+                      const [header, ...rows] = pastedCsvData.split("\n");
+                      const [key, value] = header.split(",");
+
+                      // Check if any value in the key or value column is a date
+                      const isDate = (str: string) =>
+                        isNaN(Date.parse(str)) === false && isNaN(Number(str));
+                      const containsDate = rows.some((row: any) => {
+                        const [keyValue, valueValue] = row.split(",");
+                        return isDate(keyValue) || isDate(valueValue);
+                      });
+
+                      const parsedData = rows.map((row: any) => {
+                        let [keyValue, valueValue] = row.split(",");
+                        if (containsDate) {
+                          if (isDate(keyValue))
+                            keyValue = new Date(keyValue).toLocaleDateString(
+                              "en-US",
+                              {
+                                year: "numeric",
+                                month: "short",
+                                day: "numeric",
+                              }
+                            );
+                          if (isDate(valueValue))
+                            valueValue = new Date(
+                              valueValue
+                            ).toLocaleDateString("en-US", {
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
+                            });
+                        }
+                        return {
+                          [key]: keyValue,
+                          [value]: isNaN(Number(valueValue))
+                            ? valueValue
+                            : Number(valueValue),
+                        };
+                      });
+                      // print the new formatted data
+                      console.log(parsedData);
+                      setChartData(parsedData);
+                      setXName(key);
+                      setYName(value);
+                      setGraphTitle(`Firegraph🔥`);
+                      // close the dialog after file is uploaded
+                      setOpenCsv(false);
+                    }}
+                  >
+                    Submit
+                  </Button>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index d202445..cb876db 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -56,87 +56,96 @@ export default function Graph({
   }, [chartData, yName]);
 
   return (
-    <div
-      className={`${
-        !background ? "border border-gray-300/25" : ""
-      } rounded-lg scale-75 md:scale-100`}
-    >
-      <div
-        className="cc w-full flex items-center justify-center h-fit resize-x overflow-auto"
-        style={{
-          background: background ? theme.gradient : "transparent",
-          transform:
-            window.innerHeight < 700 ? "translateY(-50px)" : "translateY(0)",
-        }}
-        ref={chartRef}
-      >
-        <div style={{ padding: `${padding}px` }} className="transition-all ">
+    <div>
+      {typeof window !== "undefined" && (
+        <div
+          className={`${
+            !background ? "border border-gray-300/25" : ""
+          } rounded-lg scale-75 md:scale-100`}
+        >
           <div
-            className={`rounded-lg p-4 ${
-              darkMode ? "bg-black bg-opacity-90" : "bg-white bg-opacity-90"
-            }`}
+            className="cc w-full flex items-center justify-center h-fit resize-x overflow-auto"
+            style={{
+              background: background ? theme.gradient : "transparent",
+              transform:
+                window.innerHeight < 700
+                  ? "translateY(-50px)"
+                  : "translateY(0)",
+            }}
+            ref={chartRef}
           >
-            <div className="w-full flex flex-col items-center mb-4">
-              <div className="w-full flex space-x-2 mb-2">
-                <div
-                  className={`w-3 h-3 ${
-                    darkMode ? "bg-gray-700" : "bg-gray-300"
-                  } rounded-full dark-mode-circle`}
-                ></div>
-                <div
-                  className={`w-3 h-3 ${
-                    darkMode ? "bg-gray-700" : "bg-gray-300"
-                  } rounded-full dark-mode-circle`}
-                ></div>
-                <div
-                  className={`w-3 h-3 ${
-                    darkMode ? "bg-gray-700" : "bg-gray-300"
-                  } rounded-full dark-mode-circle`}
-                ></div>
-              </div>
-              <div className="w-full text-center">
-                <div
-                  contentEditable
-                  className="focus:outline-none text-sm text-zinc-500 focus:ring-2 mx-2 rounded-md focus:ring-zinc-300"
-                >
-                  {graphTitle}
+            <div
+              style={{ padding: `${padding}px` }}
+              className="transition-all "
+            >
+              <div
+                className={`rounded-lg p-4 ${
+                  darkMode ? "bg-black bg-opacity-90" : "bg-white bg-opacity-90"
+                }`}
+              >
+                <div className="w-full flex flex-col items-center mb-4">
+                  <div className="w-full flex space-x-2 mb-2">
+                    <div
+                      className={`w-3 h-3 ${
+                        darkMode ? "bg-gray-700" : "bg-gray-300"
+                      } rounded-full dark-mode-circle`}
+                    ></div>
+                    <div
+                      className={`w-3 h-3 ${
+                        darkMode ? "bg-gray-700" : "bg-gray-300"
+                      } rounded-full dark-mode-circle`}
+                    ></div>
+                    <div
+                      className={`w-3 h-3 ${
+                        darkMode ? "bg-gray-700" : "bg-gray-300"
+                      } rounded-full dark-mode-circle`}
+                    ></div>
+                  </div>
+                  <div className="w-full text-center">
+                    <div
+                      contentEditable
+                      className="focus:outline-none text-sm text-zinc-500 focus:ring-2 mx-2 rounded-md focus:ring-zinc-300"
+                    >
+                      {graphTitle}
+                    </div>
+                  </div>
+                </div>
+                <div className="relative flex flex-row items-center w-full pt-6 text-xs ">
+                  <div className="-rotate-90 mb-12  mr-2 text-zinc-500">
+                    {yName}
+                  </div>
+                  <div className="flex flex-col w-full">
+                    <AreaChart
+                      style={{ width: width + "px" }}
+                      className={`h-72 transition-all`}
+                      data={finalChartData}
+                      index={xName}
+                      categories={[yName]}
+                      colors={[theme.color]}
+                      showGridLines={false}
+                      yAxisWidth={35}
+                      showAnimation={true}
+                      showLegend={false}
+                      valueFormatter={(value) => {
+                        if (value > 999) {
+                          return (value / 1000).toFixed(1) + "k";
+                        }
+                        return value.toString();
+                      }}
+                      maxValue={maxValue}
+                      connectNulls={true}
+                      curveType="monotone"
+                    />
+                    <p className="mt-2 w-full flex items-center justify-center mx-auto text-md text-zinc-500">
+                      {xName}
+                    </p>
+                  </div>
                 </div>
-              </div>
-            </div>
-            <div className="relative flex flex-row items-center w-full pt-6 text-xs ">
-              <div className="-rotate-90 mb-12  mr-2 text-zinc-500">
-                {yName}
-              </div>
-              <div className="flex flex-col w-full">
-                <AreaChart
-                  style={{ width: width + "px" }}
-                  className={`h-72 transition-all`}
-                  data={finalChartData}
-                  index={xName}
-                  categories={[yName]}
-                  colors={[theme.color]}
-                  showGridLines={false}
-                  yAxisWidth={35}
-                  showAnimation={true}
-                  showLegend={false}
-                  valueFormatter={(value) => {
-                    if (value > 999) {
-                      return (value / 1000).toFixed(1) + "k";
-                    }
-                    return value.toString();
-                  }}
-                  maxValue={maxValue}
-                  connectNulls={true}
-                  curveType="monotone"
-                />
-                <p className="mt-2 w-full flex items-center justify-center mx-auto text-md text-zinc-500">
-                  {xName}
-                </p>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/main.tsx b/src/components/main.tsx
index b0265e2..a137574 100644
--- a/src/components/main.tsx
+++ b/src/components/main.tsx
@@ -205,35 +205,22 @@ export default function MainComponent() {
           openCsv={openCsv}
           setOpenCsv={setOpenCsv}
         />
-        <div
-          className={`fixed bottom-0 left-0 right-0 ${
-            window.innerHeight < 700 ? "p-2" : "p-4"
-          } text-white text-center font-light flex justify-center items-center gap-4`}
-        >
-          <a
-            href="https://firecrawl.dev"
-            target="_blank"
-            className="text-black md:text-white hover:text-orange-400"
-            style={{ textShadow: "2px 2px 4px rgba(0, 0, 0, 0.15)" }}
-          >
-            Made by Firecrawl 🔥
-          </a>
-          <a
-            href="https://github.com/mendableai/firegraph"
-            target="_blank"
-            className="flex md:hidden text-white md:text-white bg-black rounded-md px-2 py-1 text-sm hover:text-gray-200 items-center"
-          >
-            <Github className="h-4 w-4 mr-1" />
-            Star us on GitHub
-          </a>
-          {/* <a
-            href="https://github.com/mendableai/firegraph"
-            target="_blank"
-            className="hidden md:flex text-black md:text-white bg-white/25 rounded-full w-6 h-6 text-sm hover:text-gray-200 items-center justify-center"
+        {typeof window !== "undefined" && (
+          <div
+            className={`fixed bottom-0 left-0 right-0 ${
+              window.innerHeight < 700 ? "p-2" : "p-4"
+            } text-white text-center font-light flex justify-center items-center gap-4`}
           >
-            <Github className="h-4 w-4" />
-          </a> */}
-        </div>
+            <a
+              href="https://firecrawl.dev"
+              target="_blank"
+              className="text-black md:text-white hover:text-orange-400"
+              style={{ textShadow: "2px 2px 4px rgba(0, 0, 0, 0.15)" }}
+            >
+              Made by Firecrawl 🔥
+            </a>
+          </div>
+        )}
       </main>
     </div>
   );
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index 50e1b46..c80685d 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -115,187 +115,191 @@ export default function Menu({
     });
   };
   return (
-    <div
-      className={`w-full mx-auto fixed ${
-        window.innerHeight < 700 ? "bottom-10 px-4" : "bottom-14 p-4"
-      } left-1/2 transform -translate-x-1/2 flex flex-col sm:flex-row items-center justify-center`}
-    >
-      <div
-        className={`flex flex-col items-start md:flex-row md:items-end md:space-x-8 rounded-lg bg-white border border-zinc-500/25 shadow-xl ${
-          window.innerHeight < 700 ? "px-4" : "py-[20px] p-4"
-        }`}
-      >
-        {/* <div className="flex flex-col items-start justify-start">
+    <div>
+      {typeof window !== "undefined" && (
+        <div
+          className={`w-full mx-auto fixed ${
+            window.innerHeight < 700 ? "bottom-10 px-4" : "bottom-14 p-4"
+          } left-1/2 transform -translate-x-1/2 flex flex-col sm:flex-row items-center justify-center`}
+        >
+          <div
+            className={`flex flex-col items-start md:flex-row md:items-end md:space-x-8 rounded-lg bg-white border border-zinc-500/25 shadow-xl ${
+              window.innerHeight < 700 ? "px-4" : "py-[20px] p-4"
+            }`}
+          >
+            {/* <div className="flex flex-col items-start justify-start">
       <Button className="bg-black text-white px-3 py-2 rounded hover:bg-zinc-700/10">
           <Plus size={16} className="mr-1" />
           Add data
         </Button>
         </div> */}
 
-        <div className="mt-4 flex flex-row mb-4 md:mb-0 md:mt-0 md:flex-row gap-4 items-start justify-start">
-          <div className="flex flex-col items-start justify-start">
-            <span
-              className={`text-zinc-700 ${
-                window.innerHeight < 700 ? "text-xs" : "text-sm"
-              }`}
-            >
-              Theme
-            </span>
-            <Select
-              value={theme.name}
-              onValueChange={(value) =>
-                setTheme(allThemes[value as keyof typeof allThemes] as Theme)
-              }
-            >
-              <SelectTrigger className="w-[150px]">
-                <SelectValue placeholder="16" />
-              </SelectTrigger>
-              <SelectContent>
-                {Object.entries(allThemes).map(([themeKey, themeValue]) => (
-                  <SelectItem
-                    key={themeKey}
-                    value={themeValue.name}
-                    className=""
-                  >
-                    <div className="flex flex-row items-center gap-2">
-                      <div
-                        className="w-4 h-4 rounded-full"
-                        style={{ background: themeValue.gradient }}
-                      />
-                      <div
-                        className={`${
-                          window.innerHeight < 700 ? "text-xs" : ""
-                        }`}
+            <div className="mt-4 flex flex-row mb-4 md:mb-0 md:mt-0 md:flex-row gap-4 items-start justify-start">
+              <div className="flex flex-col items-start justify-start">
+                <span
+                  className={`text-zinc-700 ${
+                    window.innerHeight < 700 ? "text-xs" : "text-sm"
+                  }`}
+                >
+                  Theme
+                </span>
+                <Select
+                  value={theme.name}
+                  onValueChange={(value) =>
+                    setTheme(
+                      allThemes[value as keyof typeof allThemes] as Theme
+                    )
+                  }
+                >
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="16" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(allThemes).map(([themeKey, themeValue]) => (
+                      <SelectItem
+                        key={themeKey}
+                        value={themeValue.name}
+                        className=""
                       >
-                        {themeValue.name.charAt(0).toUpperCase() +
-                          themeValue.name.slice(1)}
-                      </div>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex h-full flex-col items-start justify-start pb-2">
-            <span
-              className={`text-zinc-700 ${
-                window.innerHeight < 700 ? "text-xs" : "text-sm"
-              }`}
-            >
-              Background
-            </span>
-            <Switch
-              className="mt-2 scale-90 -ml-[2px]"
-              checked={background}
-              onCheckedChange={(checked) => setBackground(checked)}
-            />
-          </div>
-          <div className="flex h-full flex-col items-start justify-start pb-2">
-            <span
-              className={`text-zinc-700 ${
-                window.innerHeight < 700 ? "text-xs" : "text-sm"
-              }`}
-            >
-              Dark Mode
-            </span>
-            <Switch
-              className="mt-2 scale-90 -ml-[2px]"
-              checked={darkMode}
-              onCheckedChange={(checked) => setDarkMode(checked)}
-            />
-          </div>
-        </div>
-        <div className="flex flex-row items-end mb-4 md:mb-0 md:flex-row gap-4  justify-start">
-          <div className="flex flex-col items-start justify-start">
-            <span
-              className={`text-zinc-700 ${
-                window.innerHeight < 700 ? "text-xs" : "text-sm"
-              }`}
-            >
-              Padding
-            </span>
-            <Select
-              value={padding.toString()}
-              onValueChange={(value) => setPadding(Number(value))}
-            >
-              <SelectTrigger className="w-[100px]">
-                <SelectValue placeholder="16" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="16">16</SelectItem>
-                <SelectItem value="32">32</SelectItem>
-                <SelectItem value="64">64</SelectItem>
-                <SelectItem value="128">128</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex flex-col items-start justify-start">
-            <span
-              className={`text-zinc-700 ${
-                window.innerHeight < 700 ? "text-xs" : "text-sm"
-              }`}
-            >
-              Width
-            </span>
-            <Select
-              value={width.toString()}
-              onValueChange={(value) => setWidth(value)}
-            >
-              <SelectTrigger className="w-[100px]">
-                <SelectValue placeholder="400px" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="300">300px</SelectItem>
-                <SelectItem value="350">350px</SelectItem>
-                <SelectItem value="400">400px</SelectItem>
-                <SelectItem value="600">500px</SelectItem>
-                <SelectItem value="800">700px</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button
-              onClick={handleExport}
-              style={{
-                backgroundColor: `${theme.startColor}40`, // 1A in hex represents 10% opacity
-                color: theme.startColor,
-              }}
-              className="px-3 py-2 rounded hover:bg-red-400/10"
-            >
-              <Download size={16} className="mr-1" />
-              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}
+                        <div className="flex flex-row items-center gap-2">
+                          <div
+                            className="w-4 h-4 rounded-full"
+                            style={{ background: themeValue.gradient }}
+                          />
+                          <div
+                            className={`${
+                              window.innerHeight < 700 ? "text-xs" : ""
+                            }`}
+                          >
+                            {themeValue.name.charAt(0).toUpperCase() +
+                              themeValue.name.slice(1)}
+                          </div>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex h-full flex-col items-start justify-start pb-2">
+                <span
+                  className={`text-zinc-700 ${
+                    window.innerHeight < 700 ? "text-xs" : "text-sm"
+                  }`}
+                >
+                  Background
+                </span>
+                <Switch
+                  className="mt-2 scale-90 -ml-[2px]"
+                  checked={background}
+                  onCheckedChange={(checked) => setBackground(checked)}
                 />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-fit" side="top">
-                <DropdownMenuItem onClick={() => generateEmbedCode()}>
-                  <div className="flex items-center justify-start gap-2">
-                    <Code size={16} className="mr-1" />
-                    Embed
-                  </div>
-                </DropdownMenuItem>
-                {/* <DropdownMenuItem onClick={handleExportCopyAsImage}>
+              </div>
+              <div className="flex h-full flex-col items-start justify-start pb-2">
+                <span
+                  className={`text-zinc-700 ${
+                    window.innerHeight < 700 ? "text-xs" : "text-sm"
+                  }`}
+                >
+                  Dark Mode
+                </span>
+                <Switch
+                  className="mt-2 scale-90 -ml-[2px]"
+                  checked={darkMode}
+                  onCheckedChange={(checked) => setDarkMode(checked)}
+                />
+              </div>
+            </div>
+            <div className="flex flex-row items-end mb-4 md:mb-0 md:flex-row gap-4  justify-start">
+              <div className="flex flex-col items-start justify-start">
+                <span
+                  className={`text-zinc-700 ${
+                    window.innerHeight < 700 ? "text-xs" : "text-sm"
+                  }`}
+                >
+                  Padding
+                </span>
+                <Select
+                  value={padding.toString()}
+                  onValueChange={(value) => setPadding(Number(value))}
+                >
+                  <SelectTrigger className="w-[100px]">
+                    <SelectValue placeholder="16" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="16">16</SelectItem>
+                    <SelectItem value="32">32</SelectItem>
+                    <SelectItem value="64">64</SelectItem>
+                    <SelectItem value="128">128</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col items-start justify-start">
+                <span
+                  className={`text-zinc-700 ${
+                    window.innerHeight < 700 ? "text-xs" : "text-sm"
+                  }`}
+                >
+                  Width
+                </span>
+                <Select
+                  value={width.toString()}
+                  onValueChange={(value) => setWidth(value)}
+                >
+                  <SelectTrigger className="w-[100px]">
+                    <SelectValue placeholder="400px" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="300">300px</SelectItem>
+                    <SelectItem value="350">350px</SelectItem>
+                    <SelectItem value="400">400px</SelectItem>
+                    <SelectItem value="600">500px</SelectItem>
+                    <SelectItem value="800">700px</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  onClick={handleExport}
+                  style={{
+                    backgroundColor: `${theme.startColor}40`, // 1A in hex represents 10% opacity
+                    color: theme.startColor,
+                  }}
+                  className="px-3 py-2 rounded hover:bg-red-400/10"
+                >
+                  <Download size={16} className="mr-1" />
+                  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>
+                  <DropdownMenuContent className="w-fit" side="top">
+                    <DropdownMenuItem onClick={() => generateEmbedCode()}>
+                      <div className="flex items-center justify-start gap-2">
+                        <Code size={16} className="mr-1" />
+                        Embed
+                      </div>
+                    </DropdownMenuItem>
+                    {/* <DropdownMenuItem onClick={handleExportCopyAsImage}>
                 <div className="flex items-center justify-start gap-2">
                   <Image size={16} className="-ml-4 mr-1" />
                   Copy PNG
                 </div>
               </DropdownMenuItem> */}
-              </DropdownMenuContent>
-            </DropdownMenu>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      {/* <div className="flex items-center rounded-lg bg-white border border-zinc-500/25 shadow-xl px-4 py-[26px] gap-4">
+          {/* <div className="flex items-center rounded-lg bg-white border border-zinc-500/25 shadow-xl px-4 py-[26px] gap-4">
         <Button
           onClick={handleExport}
           className="bg-orange-400/25  text-orange-400 px-3 py-2 rounded hover:bg-red-400/10"
@@ -304,6 +308,8 @@ export default function Menu({
           Export
         </Button>
       </div> */}
+        </div>
+      )}
     </div>
   );
 }