From cf4bbb2df26134ae03069e5dadced7e3f9956a1d Mon Sep 17 00:00:00 2001
From: Eric Ciarla <ericciarla@yahoo.com>
Date: Mon, 27 May 2024 16:09:50 -0400
Subject: [PATCH] init

---
 src/app/page.tsx              |   8 +-
 src/components/data-input.tsx | 364 ++++++++++++++++++----------------
 src/components/graph.tsx      |  59 +++---
 src/components/menu.tsx       | 278 +++++++++++++++-----------
 4 files changed, 386 insertions(+), 323 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3e68b62..026bf41 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -61,7 +61,7 @@ export default function Home() {
   const [chartData, setChartData] = useState(initialData);
   const [xName, setXName] = useState("Date");
   const [yName, setYName] = useState("Stars");
-  const [padding, setPadding] = useState(32);
+  const [padding, setPadding] = useState(window.innerWidth < 450 ? 16 : 32);
   const [width, setWidth] = useState("400");
   const [theme, setTheme] = useState<Theme>(
     () => allThemes["firecrawl"] as Theme
@@ -187,7 +187,11 @@ export default function Home() {
           openCsv={openCsv}
           setOpenCsv={setOpenCsv}
         />
-        <div className="fixed bottom-0 left-0 right-0 p-4 text-white  text-center font-light">
+        <div
+          className={`fixed bottom-0 left-0 right-0 ${
+            window.innerHeight < 700 ? "p-2" : "p-4"
+          } text-white text-center font-light`}
+        >
           Made by{" "}
           <a
             href="https://firecrawl.dev"
diff --git a/src/components/data-input.tsx b/src/components/data-input.tsx
index 0ebef26..83a36cd 100644
--- a/src/components/data-input.tsx
+++ b/src/components/data-input.tsx
@@ -1,200 +1,212 @@
 import { Github, ClipboardPasteIcon, FileIcon } from "lucide-react";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Textarea } from "./ui/textarea";
 
-
 type DataInputProps = {
-    setChartData: any;
-    setXName: any;
-    setYName: any;
-    setGraphTitle: any;
-    repoUrl: string;
-    setRepoUrl: any;
-    open: boolean;
-    setOpen: any;
-    openCsv: boolean;
-    setOpenCsv: any;
-    pastedCsvData: string;
-    setPastedCsvData: any;
+  setChartData: any;
+  setXName: any;
+  setYName: any;
+  setGraphTitle: any;
+  repoUrl: string;
+  setRepoUrl: any;
+  open: boolean;
+  setOpen: any;
+  openCsv: boolean;
+  setOpenCsv: any;
+  pastedCsvData: string;
+  setPastedCsvData: any;
 };
 
 export default function DataInput({
-    setChartData,
-    setXName,
-    setYName,
-    setGraphTitle,
-    repoUrl,
-    setRepoUrl,
-    open,
-    setOpen,
-    openCsv,
-    setOpenCsv,
-    pastedCsvData,
-    setPastedCsvData,
+  setChartData,
+  setXName,
+  setYName,
+  setGraphTitle,
+  repoUrl,
+  setRepoUrl,
+  open,
+  setOpen,
+  openCsv,
+  setOpenCsv,
+  pastedCsvData,
+  setPastedCsvData,
 }: DataInputProps) {
   return (
-    <div className="mt-8 md:mt-8 mb-0 md:mb-8 xl:mb-12 xl:mt-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
+      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;
 
-                    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."
-                        );
+                  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."
+                      );
                     }
-                  }}
-                >
-                  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
+                Submit
               </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
+            </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(",");
+              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);
-                    });
+                  // 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>
+                  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>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index fb3b72a..d202445 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -57,12 +57,16 @@ export default function Graph({
 
   return (
     <div
-      className={`${!background ? "border border-gray-300/25" : ""} rounded-lg scale-75 md:scale-100` }
+      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}
       >
@@ -104,35 +108,34 @@ export default function Graph({
                 {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>
+                <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>
       </div>
     </div>
   );
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
index bb7d131..01d7611 100644
--- a/src/components/menu.tsx
+++ b/src/components/menu.tsx
@@ -110,140 +110,184 @@ export default function Menu({
     });
   };
   return (
-    <div className="w-full mx-auto fixed bottom-14 left-1/2 transform -translate-x-1/2 flex flex-col sm:flex-row items-center justify-center p-4">
-      
-      <div className="flex flex-col items-start md:flex-row md:items-end md:space-x-8 p-4 rounded-lg bg-white border border-zinc-500/25 shadow-xl py-[20px]">
+    <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 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>
-                      {themeValue.name.charAt(0).toUpperCase() +
-                        themeValue.name.slice(1)}
+          <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" : ""
+                        }`}
+                      >
+                        {themeValue.name.charAt(0).toUpperCase() +
+                          themeValue.name.slice(1)}
+                      </div>
                     </div>
-                  </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex h-full flex-col items-start justify-start pb-2">
-          <span className="text-zinc-700 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 text-sm">Dark Mode</span>
-          <Switch
-            className="mt-2 scale-90 -ml-[2px]"
-            checked={darkMode}
-            onCheckedChange={(checked) => setDarkMode(checked)}
-          />
-        </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 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 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"
+          <div className="flex flex-col items-start justify-start">
+            <span
+              className={`text-zinc-700 ${
+                window.innerHeight < 700 ? "text-xs" : "text-sm"
+              }`}
             >
-              <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}>
+              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>
-        </div>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </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">