Nick:

mendableai · May 26, 2024 · 0129809 · 0129809
1 parent 548a48f
commit 0129809
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@headlessui/tailwindcss": "^0.2.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@remixicon/react": "^4.2.0",
     "@tremor/react": "^3.17.2",
     "axios": "^1.7.2",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -17,6 +17,8 @@ export default function Home() {
   const [padding, setPadding] = useState(64);
   const [theme, setTheme] = useState<Theme>(() => allThemes["sunset"] as Theme);
 
+  const [background, setBackground] = useState(true);
+
   const chartRef = useRef<HTMLDivElement>(null);
 
   const handleExport = async () => {
@@ -29,12 +31,13 @@ export default function Home() {
         logging: true,
         onclone: (document: Document) => {
           Array.from(
-            document
-              .querySelector(".cc")
-              ?.querySelectorAll("*") || []
+            document.querySelector(".cc")?.querySelectorAll("*") || []
           ).forEach((e) => {
             let existingStyle = e.getAttribute("style") || "";
-            e.setAttribute("style", existingStyle + "; font-family: Inter, sans-serif !important");
+            e.setAttribute(
+              "style",
+              existingStyle + "; font-family: Inter, sans-serif !important"
+            );
           });
         },
       });
@@ -55,14 +58,16 @@ export default function Home() {
       }}
     >
       <main className="relative flex h-[95vh] flex-col items-center justify-center bg-transparent bg-opacity-80">
-      <Graph padding={padding} theme={theme} chartRef={chartRef} />
+        <Graph padding={padding} theme={theme} background={background} chartRef={chartRef} />
 
         <Menu
           padding={padding}
           setPadding={setPadding}
           theme={theme}
           setTheme={setTheme}
           handleExport={handleExport}
+          background={background}
+          setBackground={setBackground}
         />
         <div className="absolute bottom-0 left-0 right-0 p-4 text-white  text-center font-light">
           Made by{" "}

diff --git a/src/components/graph.tsx b/src/components/graph.tsx
@@ -5,7 +5,7 @@ import { AreaChart, Color } from "@tremor/react";
 import { useState, useRef } from "react";
 import html2canvas from "html2canvas";
 
-export default function Graph({ padding, theme, chartRef }: { padding: number, theme: Theme, chartRef: React.RefObject<HTMLDivElement> }) {
+export default function Graph({ padding, theme, background, chartRef }: { padding: number, theme: Theme, background: boolean, chartRef: React.RefObject<HTMLDivElement> }) {
   const mockchartdata = [
     {
       date: "Apr 15",
@@ -79,10 +79,11 @@ export default function Graph({ padding, theme, chartRef }: { padding: number, t
 
 
   return (
+    <div className={`${!background ? 'border border-gray-300/25' : ''} rounded-lg`}>
     <div
       className="cc flex items-center justify-center h-fit resize-x overflow-auto"
       style={{
-        background: theme.gradient,
+        background: background ? theme.gradient : "transparent",
       }}
       ref={chartRef}
     >
@@ -125,5 +126,6 @@ export default function Graph({ padding, theme, chartRef }: { padding: number, t
         priority
       /> */}
     </div>
+  </div>
   );
 }
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
@@ -8,27 +8,34 @@ import {
 } from "./ui/select";
 import { Theme, allThemes } from "@/lib/theme";
 import { Button } from "./ui/button";
+import { Switch } from "./ui/switch";
 
 export default function Menu({
   padding,
   setPadding,
   theme,
   setTheme,
+  background,
+  setBackground,
   handleExport,
 }: {
   padding: number;
   setPadding: (padding: number) => void;
   theme: Theme;
   setTheme: (theme: Theme) => void;
+  background: boolean;
+  setBackground: (background: boolean) => void;
   handleExport: () => void;
 }) {
   return (
-    <div className="absolute bottom-14 left-1/2 transform -translate-x-1/2 flex items-end space-x-4 p-4 rounded-lg bg-white border border-gray-500/25 shadow-xl ">
+    <div className="absolute bottom-14 left-1/2 transform -translate-x-1/2 flex items-end space-x-8 p-4 rounded-lg bg-white border border-gray-500/25 shadow-xl ">
       <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)}
+          onValueChange={(value) =>
+            setTheme(allThemes[value as keyof typeof allThemes] as Theme)
+          }
         >
           <SelectTrigger className="w-[150px]">
             <SelectValue placeholder="16" />
@@ -37,14 +44,28 @@ export default function Menu({
             {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>
+                  <div
+                    className="w-4 h-4 rounded-full"
+                    style={{ background: themeValue.gradient }}
+                  />
+                  <div>
+                    {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 text-sm">Background</span>
+        <Switch
+          className="mt-2 scale-90 -ml-[2px]"
+          checked={background}
+          onCheckedChange={(checked) => setBackground(checked)}
+        />
+      </div>
       <div className="flex flex-col items-start justify-start">
         <span className="text-zinc-700 text-sm">Padding</span>
         <Select
@@ -65,7 +86,10 @@ export default function Menu({
       <Button className="bg-orange-400/25 text-orange-400 px-4 py-2 rounded hover:bg-orange-400/10">
         Add data
       </Button>
-      <Button onClick={handleExport} className="bg-red-400/25  text-red-400 px-4 py-2 rounded hover:bg-red-400/10">
+      <Button
+        onClick={handleExport}
+        className="bg-red-400/25  text-red-400 px-4 py-2 rounded hover:bg-red-400/10"
+      >
         Export
       </Button>
     </div>

diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-zinc-900 data-[state=unchecked]:bg-zinc-200 dark:focus-visible:ring-zinc-300 dark:focus-visible:ring-offset-zinc-950 dark:data-[state=checked]:bg-zinc-50 dark:data-[state=unchecked]:bg-zinc-800",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 dark:bg-zinc-950"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }