Create header

Implement themes and routes

air.toml

@@ -4,6 +4,6 @@ tmp_dir = "tmp"
 [build]
     bin = "main"
     cmd = "go build -o {{.Output}} {{.Input}}"
-    exclude = ["tmp/*", "frontend/*"]
+    exclude = ["tmp/*", "client/*"]
     include = ["**/*.go"]
     ignore = ["tmp/*"]

client/package.json

@@ -15,11 +15,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.440.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@types/node": "^22.5.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

client/src/App.tsx

@@ -1,7 +1,16 @@
+import { Route, Routes } from "react-router-dom";
+
+import { AppRoutes } from "@/constants/routes";
+import { Header } from "@/components/header";
+import RootPage from "@/routes/root/page";
+
 function App() {
   return (
-    <main className="h-dvh flex-center">
-      <h1 className="font-bold text-2xl">Hello world!</h1>
+    <main className="h-dvh">
+      <Header />
+      <Routes>
+        <Route path={AppRoutes.Root} element={<RootPage />} />
+      </Routes>
     </main>
   );
 }

client/src/components/header/index.tsx

@@ -0,0 +1,15 @@
+import { ToggleMode } from "./toggle-mode";
+import { Logo } from "./logo";
+
+const Header = () => {
+  return (
+    <header className="h-14 w-full fixed top-0 bg-secondary/10 backdrop-blur-lg border-b border-secondary/25 shadow-sm px-4 lg:px-0">
+      <nav className="max-w-screen-lg mx-auto h-full flex-between">
+        <Logo />
+        <ToggleMode />
+      </nav>
+    </header>
+  );
+};
+
+export { Header };

client/src/components/header/logo.tsx

@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+
+import { AppRoutes } from "@/constants/routes";
+import { KEY } from "@/constants/assets";
+
+const Logo = () => {
+  return (
+    <h1 className="transition-all ease-in-out duration-200 drop-shadow-lg hover:drop-shadow-secondary-glow hover:scale-95">
+      <Link to={AppRoutes.Root} className="flex items-center gap-x-2">
+        <img src={KEY} alt="Key Logo" className="w-8 h-8" loading="lazy" />
+        <div className="flex flex-col">
+          <span className="text-lg font-bold leading-none text-secondary">
+            Go
+          </span>
+          <span className="font-semibold leading-none">React Auth</span>
+        </div>
+      </Link>
+    </h1>
+  );
+};
+
+export { Logo };

client/src/components/header/toggle-mode.tsx

@@ -0,0 +1,26 @@
+import { Moon, Sun } from "lucide-react";
+
+import { Theme, useTheme } from "@/lib/hooks/use-theme";
+
+const ToggleMode = () => {
+  const { theme, setTheme } = useTheme();
+
+  const onClick = () => {
+    if (theme === Theme.Light) {
+      setTheme(Theme.Dark);
+    } else {
+      setTheme(Theme.Light);
+    }
+  };
+
+  return (
+    <button
+      className="w-10 h-10 rounded-full flex-center transition-colors bg-accent/40 hover:bg-accent"
+      onClick={onClick}
+    >
+      {theme === Theme.Light ? <Sun size={22} /> : <Moon size={22} />}
+    </button>
+  );
+};
+
+export { ToggleMode };

client/src/constants/assets.ts

@@ -0,0 +1,3 @@
+import key from "@/assets/key.svg";
+
+export const KEY = key;

client/src/constants/routes.ts

@@ -0,0 +1,8 @@
+export enum AppRoutes {
+  Root = "/",
+  SignUp = "/sign-up",
+  SignIn = "/sign-in",
+  ForgotPassword = "/forgot-password",
+  ResetPassword = "/reset-password",
+  VerifyEmail = "/verify-email",
+}

client/src/index.css

@@ -5,17 +5,57 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --foreground: 6 35 31;
+    --background: 242 253 251;
+    --primary: 38 220 212;
+    --secondary: 235 158 132;
+    --secondary-fade: rgba(235, 158, 132, 0.2);
+    --accent: 187 230 96;
+  }
+
+  .dark {
+    --foreground: 220 249 245;
+    --background: 2 13 11;
+    --primary: 35 215 206;
+    --secondary: 123 46 20;
+    --secondary-fade: rgba(123, 46, 20, 0.2);
+    --accent: 116 159 25;
+  }
+
   * {
     @apply m-0 p-0 scroll-smooth box-border;
   }
+
   html,
   body {
     @apply bg-background text-foreground font-poppins;
   }
+
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: var(--secondary-fade);
+    opacity: 0.2;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--secondary);
+    opacity: 0.8;
+    border-radius: 9999px;
+    transition: all 5s ease-out;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--secondary);
+    opacity: 1;
+  }
 }
 
 @layer utilities {
   .flex-center {
     @apply flex items-center justify-center;
   }
+  .flex-between {
+    @apply flex items-center justify-between;
+  }
 }

client/src/lib/hooks/use-theme.tsx

@@ -0,0 +1,21 @@
+import { useContext } from "react";
+
+import { ThemeProviderContext } from "@/lib/providers/theme-provider";
+
+export enum Theme {
+  System = "system",
+  Light = "light",
+  Dark = "dark",
+}
+
+const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+
+  return context;
+};
+
+export { useTheme };

client/src/lib/providers/theme-provider.tsx

@@ -0,0 +1,69 @@
+import { createContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+const ThemeProvider = ({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) => {
+  const [theme, setTheme] =
+    useState<Theme>(() => localStorage.getItem(storageKey) as Theme) ||
+    defaultTheme;
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+
+      setTheme(systemTheme);
+
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme, setTheme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+};
+
+export { ThemeProvider, ThemeProviderContext };