feat: Implement theme selection dropdown menu in GraphLayout component

phukon · Mar 18, 2024 · 55bc166 · 55bc166
1 parent 77bbb4c
commit 55bc166
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 8 deletions.
diff --git a/src/app/dash/activity/page.tsx b/src/app/dash/activity/page.tsx
@@ -1,12 +1,41 @@
 "use client";
+import { useState } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import GraphLayout from "@/components/graph/layout";
-import React from "react";
+import { themes } from "@/lib/graph";
 
 const Activity = () => {
+  const [isUpdating, setIsupdating] = useState<boolean>(false);
+  const [selectedTheme, setSelectedTheme] = useState<keyof typeof themes>("solarizedDark");
+
+  const handleThemeChange = (value: string) => {
+    setSelectedTheme(value as typeof selectedTheme);
+  };
   return (
     <div className="ml-7 md:ml-0 flex flex-col items-center gap-8">
       <span className=" mt-5 text-2xl font-semibold md:text-4xl">Your full activity</span>
-      <GraphLayout isPreview={false} />
+      <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 isPreview={false} themeName={selectedTheme} />
     </div>
   );
 };

diff --git a/src/app/dash/page.tsx b/src/app/dash/page.tsx
@@ -17,12 +17,20 @@ import { useState } from "react";
 import { AddDocumentButton } from "@/components/document/AddDocumentButton";
 import { removeDocument } from "@/actions/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()
@@ -32,7 +40,29 @@ 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">
-      <GraphLayout key={isUpdating.toString()} isPreview={true} />
+      <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} />
+
       <div className=" grid md:flex md:flex-row mt-3 gap-2">
         <Button disabled={isUpdating} className=" col-span-1" variant="outline" onClick={onClick}>
           {isUpdating ? (

diff --git a/src/components/graph/layout.tsx b/src/components/graph/layout.tsx
@@ -1,11 +1,15 @@
 "use client";
+
 import Graph from "./page";
-const GraphLayout = ({ isPreview }: { isPreview: boolean }) => {
+import { themes } from "@/lib/graph";
+
+const GraphLayout = ({ isPreview, themeName }: { isPreview: boolean; themeName: keyof typeof themes }) => {
   return (
     <div>
-      <Graph isPreview={isPreview} />
+      <Graph isPreview={isPreview} themeName={themeName} />
     </div>
   );
 };
 
 export default GraphLayout;
+
diff --git a/src/components/graph/page.tsx b/src/components/graph/page.tsx
@@ -4,17 +4,19 @@ import { drawContributions } from "@/lib/graph";
 import { getUserData } from "./_getData";
 import { DataStruct } from "@/types";
 import { useCurrentUser } from "@/hooks/use-current-user";
+import { themes } from "@/lib/graph";
 // 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 = props.isPreview;
+  const { isPreview, themeName } = props;
   const canvasRef = useRef(null);
   const [userData, setUserData] = useState<DataStruct>();
   const currentYear = new Date().getFullYear();
@@ -48,12 +50,12 @@ export default function Graph(props: GraphProps) {
       drawContributions(canvasRef.current, {
         data: isPreview ? filteredData : userData,
         username: username ?? "", // Provide a default value for username
-        themeName: "solarizedDark",
+        themeName: themeName, 
         footerText: "Clack ©2024",
         wordCount: 0, // might use later
       });
     }
-  }, [userData, username, currentYear, isPreview]);
+  }, [userData, username, currentYear, isPreview, themeName]);
 
   // const handlePostClick = () => {
   //   seedUserData(userId);