fix #10 add switch dark/light mode

FalkorDB · Jan 20, 2024 · 720568f · 720568f
1 parent 0fbb26a
commit 720568f
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 18 deletions.
diff --git 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
@@ -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>
   )
 };
diff --git 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
@@ -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
diff --git 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",