improved design and UX in /dash page

src/app/dash/page.tsx

@@ -17,26 +17,12 @@ import { useState } from "react";
 import { AddDocumentButton } from "@/components/document/AddDocumentButton";
 import { removeDocument } from "@/actions/document/removeDocument";
 import { useToast } from "@/components/ui/use-toast";
-import { themes } from "@/lib/graph";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 
 const Dash = () => {
   const { toast } = useToast();
   const { kv, deleteNote, notion, setNotion, google, setGoogle, revalidateNotes } = useNotes();
   const [isUpdating, setIsupdating] = useState<boolean>(false);
 
-  const [selectedTheme, setSelectedTheme] = useState<keyof typeof themes>("solarizedDark");
-
-  const handleThemeChange = (value: string) => {
-    setSelectedTheme(value as typeof selectedTheme);
-  };
-
   const onClick = () => {
     setIsupdating(true);
     addContribution()
@@ -57,28 +43,7 @@ const Dash = () => {
   return (
     // pt-[calc(10vh)]
     <div className="mb-12 ml-3 p-4 flex min-h-[100svh] flex-col items-center sm:px-5 md:mb-0">
-      <Select onValueChange={(value: string) => handleThemeChange(value)}>
-        <SelectTrigger className=" mb-1 w-[180px]">
-          <SelectValue placeholder="Select Theme" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="solarizedDark">Solarized Dark</SelectItem>
-          <SelectItem value="solarizedLight">Solarized Light</SelectItem>
-          <SelectItem value="standard">Standard</SelectItem>
-          <SelectItem value="classic">Classic</SelectItem>
-          <SelectItem value="githubDark">GitHub Dark</SelectItem>
-          <SelectItem value="halloween">Halloween</SelectItem>
-          <SelectItem value="teal">Teal</SelectItem>
-          <SelectItem value="leftPad">Left Pad</SelectItem>
-          <SelectItem value="dracula">Dracula</SelectItem>
-          <SelectItem value="blue">Blue</SelectItem>
-          <SelectItem value="panda">Panda</SelectItem>
-          <SelectItem value="sunny">Sunny</SelectItem>
-          <SelectItem value="pink">Pink</SelectItem>
-          <SelectItem value="YlGnBu">YlGnBu</SelectItem>
-        </SelectContent>
-      </Select>
-      <GraphLayout key={isUpdating.toString()} isPreview={true} themeName={selectedTheme} />
+      <GraphLayout key={isUpdating.toString()} isPreview={true} />
 
       <div className=" grid md:flex md:flex-row mt-3 gap-2">
         <Button disabled={isUpdating} className=" col-span-1" variant="outline" onClick={onClick}>

src/components/graph/layout.tsx

@@ -1,13 +1,16 @@
 "use client";
 
 import Graph from "./page";
-import { themes } from "@/lib/graph";
 
-const GraphLayout = ({ isPreview, themeName }: { isPreview: boolean; themeName: keyof typeof themes }) => {
+interface GraphLayoutProps {
+  isPreview: boolean;
+}
+
+const GraphLayout = ({ isPreview }: GraphLayoutProps) => {
   return (
-    <div>
-      <Graph isPreview={isPreview} themeName={themeName} />
-    </div>
+    <>
+      <Graph isPreview={isPreview} />
+    </>
   );
 };
 

src/components/graph/page.tsx

@@ -5,26 +5,32 @@ import { getUserData } from "./_getData";
 import { DataStruct } from "@/types";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import { themes } from "@/lib/graph";
-import { toast } from "../ui/use-toast";
+import { toast } from "@/components/ui/use-toast";
+import { Button } from "@/components/ui/button";
+import SelectTheme from "@/components/select-theme";
 // import useNotes from '@/context/NotesContext';
 // import { seedUserData } from './_addData';
 // import jsonData from './mock.json';
 
 type GraphProps = {
   isPreview: boolean;
-  themeName: keyof typeof themes;
 };
 
 export default function Graph(props: GraphProps) {
   // const {wordCount} = useNotes()
-  const { isPreview, themeName } = props;
+  const [selectedTheme, setSelectedTheme] = useState<keyof typeof themes>("solarizedDark");
+  const { isPreview } = props;
   const canvasRef = useRef(null);
   const [userData, setUserData] = useState<DataStruct>();
   const currentYear = new Date().getFullYear();
   const user = useCurrentUser();
   const username = user?.name;
   const userId = user?.id;
 
+  const handleThemeChange = (value: string) => {
+    setSelectedTheme(value as keyof typeof themes);
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -39,6 +45,7 @@ export default function Graph(props: GraphProps) {
     };
 
     fetchData();
+    console.log(canvasRef.current)
   }, [userId]);
 
   useEffect(() => {
@@ -53,38 +60,46 @@ export default function Graph(props: GraphProps) {
       drawContributions(canvasRef.current, {
         data: isPreview ? filteredData : userData,
         username: username ?? "", // Provide a default value for username
-        themeName: themeName,
+        themeName: selectedTheme,
         footerText: "Clack ©2024",
         wordCount: 0, // might use later
       });
     }
-  }, [userData, username, currentYear, isPreview, themeName]);
+  }, [userData, username, currentYear, isPreview, selectedTheme]);
 
   // const handlePostClick = () => {
   //   seedUserData(userId);
   // };
 
   return (
     <div
-      className="border-gray-200 border-2 max-w-[325px] md:max-w-full px-1 md:p-10"
+      className="border-gray-200 border-2 rounded max-w-[325px] md:max-w-full p-1 md:p-10"
       style={{ overflowX: "auto" }}
     >
       {/* <button onClick={handlePostClick}>POST Data</button> */}
-      <button
-        onClick={() => {
-          navigator.clipboard.writeText(`${process.env.NEXT_PUBLIC_APP_URL}/embed/${user?.id}`);
-          toast({
-            title: "🎊 Copied embed link to clipboard! 🎊",
-            description:
-              "You can use this widget in your Notion pages!",
-            variant:"success",
-          });
-        }}
-        className=" border-2 text-gray-500 border-gray-300 px-2 rounded-md"
-      >
-        copy 🔗
-      </button>
-      <canvas className="max-w-none md:w-full h-auto" ref={canvasRef}></canvas>
+      <div className="w-full flex justify-between">
+        <Button
+          onClick={() => {
+            navigator.clipboard.writeText(`${process.env.NEXT_PUBLIC_APP_URL}/embed/${user?.id}`);
+            toast({
+              title: "🎊 Copied embed link to clipboard! 🎊",
+              description: "You can use this widget in your Notion pages!",
+              variant: "success",
+            });
+          }}
+          variant="outline"
+          className="mb-2"
+        >
+          copy 🔗
+        </Button>
+        <SelectTheme handleThemeChange={handleThemeChange} />
+      </div>
+      <div className="relative w-[400px] md:w-[900px]">
+      <canvas className="max-w-none md:w-full rounded" ref={canvasRef}></canvas>
+      {!canvasRef.current && (
+        <div className="absolute top-0 left-0 w-[400px] md:w-[900px] h-full animate-pulse rounded bg-gray-400"></div>
+      )}
+      </div>
     </div>
   );
 }

src/components/select-theme.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface SelectThemeProps {
+    handleThemeChange: (value: string) => void;
+}
+
+export default function SelectTheme({ handleThemeChange }: SelectThemeProps) {
+  return (
+    <Select onValueChange={(value: string) => handleThemeChange(value)}>
+      <SelectTrigger className=" mb-1 w-[180px]">
+        <SelectValue placeholder="Select Theme" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="solarizedDark">Solarized Dark</SelectItem>
+        <SelectItem value="solarizedLight">Solarized Light</SelectItem>
+        <SelectItem value="standard">Standard</SelectItem>
+        <SelectItem value="classic">Classic</SelectItem>
+        <SelectItem value="githubDark">GitHub Dark</SelectItem>
+        <SelectItem value="halloween">Halloween</SelectItem>
+        <SelectItem value="teal">Teal</SelectItem>
+        <SelectItem value="leftPad">Left Pad</SelectItem>
+        <SelectItem value="dracula">Dracula</SelectItem>
+        <SelectItem value="blue">Blue</SelectItem>
+        <SelectItem value="panda">Panda</SelectItem>
+        <SelectItem value="sunny">Sunny</SelectItem>
+        <SelectItem value="pink">Pink</SelectItem>
+        <SelectItem value="YlGnBu">YlGnBu</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}