From a07c0357f011ac1b195f5dd2a775443c11e120e4 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Mon, 4 Dec 2023 16:41:41 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Added=20code=20for=20dark=20mode?=
 =?UTF-8?q?=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/shared/Navbar2.tsx | 38 ++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/client/components/shared/Navbar2.tsx b/src/client/components/shared/Navbar2.tsx
index e1e7568..96830c5 100644
--- a/src/client/components/shared/Navbar2.tsx
+++ b/src/client/components/shared/Navbar2.tsx
@@ -1,6 +1,13 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useState } from "react";
 
 export const Navbar2 = (): ReactElement => {
+  const [isLightMode, setIsLightMode] = useState(false);
+
+  const handleToggle = () => {
+    setIsLightMode(!isLightMode);
+    // Add your code for enabling dark/light mode here
+  };
+
   return (
     <header className="dark:bg-gray h-18 bg-white gap-8 px-5 py-5 border-b-2">
       {/* Logo */}
@@ -64,12 +71,13 @@ export const Navbar2 = (): ReactElement => {
           {/* Right-most Nav */}
           <div className="flex items-center gap-4">
             <ul className="flex items-center gap-6 text-md">
+              {/* Settings Icon and text */}
               <li>
                 <a
                   href="#"
                   className="flex items-center space-x-1 text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75"
                 >
-                  <span>
+                  <span className="w-5 h-6">
                     <span>
                       <i className="icon-[solar--settings-outline] h-5 w-5"></i>
                     </span>
@@ -77,6 +85,32 @@ export const Navbar2 = (): ReactElement => {
                   <span>Settings</span>
                 </a>
               </li>
+
+              <li>
+                {/* Light/Dark Mode toggle */}
+                <div className="flex items-center space-x-2">
+                  <span className="text-gray-600">Dark Mode</span>
+                  <label
+                    htmlFor="toggle"
+                    className="relative inline-flex items-center"
+                  >
+                    <input
+                      type="checkbox"
+                      id="toggle"
+                      className="sr-only"
+                      checked={isLightMode}
+                      onChange={handleToggle}
+                    />
+                    <span className="bg-gray-300 w-10 h-6 rounded-full"></span>
+                    <span
+                      className={`bg-white w-4 h-4 rounded-full absolute left-1 top-1 transition-transform duration-300 ease-in-out ${
+                        isLightMode ? "translate-x-4" : ""
+                      }`}
+                    ></span>
+                  </label>
+                  <span className="text-gray-600">Light Mode</span>
+                </div>
+              </li>
             </ul>
           </div>
         </div>