From 720568fb952d3a642ecbbf6bf75dc034a818ae36 Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Sat, 20 Jan 2024 21:32:51 +0200
Subject: [PATCH 1/2] fix #10 add switch dark/light mode

---
 app/page.tsx                 |  8 +++---
 app/providers.tsx            | 18 ++++++++------
 components/custom/navbar.tsx | 39 ++++++++++++++++++++++++++----
 components/ui/switch.tsx     | 29 ++++++++++++++++++++++
 package-lock.json            | 47 ++++++++++++++++++++++++++++++++++++
 package.json                 |  1 +
 6 files changed, 124 insertions(+), 18 deletions(-)
 create mode 100644 components/ui/switch.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 7c52c0a..31cac53 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -18,13 +18,11 @@ export default function Home() {
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen py-2">
-      <main className="flex flex-col items-center justify-center flex-1 px-20 text-center">
+      <main className="flex flex-col items-center justify-center flex-1 px-20 text-center space-y-5">
         <h1 className="text-4xl font-bold">
-          Welcome to{' '}
-          <Link className="text-blue-600 underline underline-offset-2" onClick={() => signIn("Credentials", { callbackUrl: '/graph' })} href="/">
-            FalkorDB Browser
-          </Link>
+          Welcome to FalkorDB Browser
         </h1>
+        <Button onClick={() => signIn("Credentials", { callbackUrl: '/graph' })}>Sign In</Button>
       </main>
     </div>
   )
diff --git a/app/providers.tsx b/app/providers.tsx
index 4ef6807..b702f77 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -3,7 +3,7 @@
 import Navbar from "@/components/custom/navbar";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { SessionProvider } from "next-auth/react";
-// import Navigation from "./components/navigation";
+import { ThemeProvider } from 'next-themes'
 
 type Props = {
   children?: React.ReactNode;
@@ -12,13 +12,15 @@ type Props = {
 export const NextAuthProvider = ({ children }: Props) => {
   return (
     <SessionProvider>
-      <ResizablePanelGroup direction="horizontal" className='min-h-screen'>
-        <ResizablePanel defaultSize={20} maxSize={30} collapsible={true} minSize={10}>
-          <Navbar />
-        </ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={80}>{children}</ResizablePanel>
-      </ResizablePanelGroup>
+      <ThemeProvider attribute="class" enableSystem={true}>
+        <ResizablePanelGroup direction="horizontal" className='min-h-screen'>
+          <ResizablePanel defaultSize={20} maxSize={30} collapsible={true} minSize={10}>
+            <Navbar />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={80}>{children}</ResizablePanel>
+        </ResizablePanelGroup>
+      </ThemeProvider>
     </SessionProvider>
   )
 };
\ No newline at end of file
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index fe5ef4c..fa4ddaf 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -1,14 +1,43 @@
 import { LogOut, Menu } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
 
 export default function Navbar() {
   const { data: session, status } = useSession()
+  const { theme, setTheme, systemTheme} = useTheme()
+  
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  function setDarkMode(val: boolean) {
+    if (val) {
+      setTheme("dark")
+    }
+    else {
+      setTheme("light")
+    }
+  }
+
+  let darkmode = theme=="dark" || (theme=="system" && systemTheme=="dark")
 
   return (
-    <nav className="w-full h-full bg-gray-100 p-5">
-      <div className="flex items-center space-x-2 border-b pb-4 mb-4">
-        <Menu className="h-6 w-6 text-blue-500" />
+    <nav className="w-full h-full bg-gray-100 dark:bg-gray-800 p-5 space-y-4 flex flex-col">
+      {
+        mounted &&
+        <div className="flex items-center space-x-2">
+          <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
+          <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
+        </div>
+      }
+      <div className="flex items-center space-x-2 border-b">
+        <Menu className="h-6 w-6" />
         <span className="font-bold">FalkorDB Browser</span>
       </div>
       <ul className="space-y-2">
@@ -33,10 +62,10 @@ export default function Navbar() {
             <AirVentIcon className="h-6 w-6" />
             <span>Profile</span>
           </li> */}
-        { status === "authenticated" &&
+        {status === "authenticated" &&
           <li className="flex items-center space-x-2">
             <LogOut className="h-6 w-6" />
-            <Link className="text-blue-600 underline underline-offset-2" onClick={() => signOut({ callbackUrl: '/' })} href="/">
+            <Link className="underline underline-offset-2" onClick={() => signOut({ callbackUrl: '/' })} href="/">
               Sign Out
             </Link>
           </li>
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..bc69cf2
--- /dev/null
+++ b/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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/package-lock.json b/package-lock.json
index 8ee56ef..f0ddc04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-slot": "^1.0.2",
+        "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
@@ -839,6 +840,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz",
+      "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tabs": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
@@ -1007,6 +1037,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
diff --git a/package.json b/package.json
index 18d8780..da422ff 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",

From 6d3f961f0878c1d833afa59b2867a6c8d048ac16 Mon Sep 17 00:00:00 2001
From: Guy Korland <gkorland@gmail.com>
Date: Sat, 20 Jan 2024 22:08:22 +0200
Subject: [PATCH 2/2] fix review comment

---
 components/custom/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index fa4ddaf..2ed3d66 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -65,7 +65,7 @@ export default function Navbar() {
         {status === "authenticated" &&
           <li className="flex items-center space-x-2">
             <LogOut className="h-6 w-6" />
-            <Link className="underline underline-offset-2" onClick={() => signOut({ callbackUrl: '/' })} href="/">
+            <Link className="underline underline-offset-2" href="/" onClick={() => signOut({ callbackUrl: '/' })}>
               Sign Out
             </Link>
           </li>