From e11da426dc6b71f28c66bb4d445f76bdc2ad7d6c Mon Sep 17 00:00:00 2001
From: Munashe Njanji <160286155+Munashe-Njanji@users.noreply.github.com>
Date: Fri, 8 Nov 2024 02:07:23 +0200
Subject: [PATCH] feat: add light mode support to component

- Implemented light mode styling for the component
- Added toggle functionality between light and dark modes
---
 src/app/{page.js => page.jsx} | 41 +++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 16 deletions(-)
 rename src/app/{page.js => page.jsx} (91%)

diff --git a/src/app/page.js b/src/app/page.jsx
similarity index 91%
rename from src/app/page.js
rename to src/app/page.jsx
index a0e2e01..a3a5fac 100644
--- a/src/app/page.js
+++ b/src/app/page.jsx
@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useState, useRef } from "react";
-import { Download ,Github} from "lucide-react";
+import React, { useState, useRef, useCallback } from "react";
+import { Download, Github, Sun, Moon } from "lucide-react";
 import html2canvas from "html2canvas";
 import AceEditor from "react-ace";
 
@@ -13,7 +13,12 @@ import "ace-builds/src-noconflict/ext-language_tools";
 const CodeTimeline = () => {
   const [codeInput, setCodeInput] = useState("");
   const [timelineData, setTimelineData] = useState([]);
-  const [darkMode, setDarkMode] = useState(true);
+  const [darkMode, setDarkMode] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("darkMode") !== "false";
+    }
+    return true;
+  });
   const timelineRef = useRef(null);
   const [elementTypes, setElementTypes] = useState({
     keyword: "#FF6B6B", // Soft Red
@@ -123,10 +128,13 @@ const CodeTimeline = () => {
     setTimelineData(generateTimelineFromCode(newCode));
   };
 
-  const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
-    localStorage.setItem("darkMode", !darkMode);
-  };
+  const toggleDarkMode = useCallback(() => {
+    setDarkMode(prev =>  {
+      const newValue = !prev;
+      localStorage.setItem("darkMode", newValue);
+      return newValue;
+    })
+  }, [])
 
   const exportImage = async () => {
     if (timelineRef.current) {
@@ -179,15 +187,16 @@ const CodeTimeline = () => {
           Code Timeline Visualizer
         </h2>
         <div className="flex items-center space-x-4">
-          {/* <div className="flex items-center space-x-2">
-            <Toggle onClick={toggleDarkMode}>
-              {darkMode ? (
-                <Sun className={`h-4 w-4 ${"text-gray-400"}`} />
-              ) : (
-                <Moon className={`h-4 w-4 ${"text-gray-600"}`} />
-              )}
-            </Toggle>
-          </div> */}
+          <button
+            onClick={toggleDarkMode}
+            className={`p-2 rounded-full ${
+              darkMode
+              ? "bg-gray-700 hover:bg-gray-600 text-gray-200"
+              : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+            }`}
+          >
+            {darkMode?<Sun className="w-4 h-4"/>: <Moon className="w-4 h-4"/>}
+          </button>
 
           <a
             href="https://github.com/X-SLAYER/code_timeline_preview"