Spaces:

Kaadan
/

subul

Sleeping

App Files Files Community

AshameTheDestroyer commited on Feb 5

Commit

91b29b1

1 Parent(s): f08c3c4

Registration Initiated.

Browse files

Files changed (5) hide show

frontend/app/components/header.tsx +3 -30
frontend/app/components/theme-toggle.tsx +36 -0
frontend/app/root.tsx +18 -5
frontend/app/routes.ts +1 -0
frontend/app/routes/registration.tsx +14 -0

frontend/app/components/header.tsx CHANGED Viewed

@@ -2,45 +2,18 @@
 import { Button } from "./ui/button";
 import { useSidebar } from "./ui/sidebar";
-import { useState, useEffect } from "react";
-import { MoonIcon, SidebarCloseIcon, SidebarOpenIcon, SunIcon } from "lucide-react";
 export function Header() {
     const { state, toggleSidebar } = useSidebar();
-    const [darkMode, setDarkMode] = useState<boolean>(() => {
-        try {
-            const stored = localStorage.getItem("theme");
-            if (stored) return stored === "dark";
-            return (
-                typeof window !== "undefined" &&
-                window.matchMedia?.("(prefers-color-scheme: dark)")?.matches
-            );
-        } catch {
-            return false;
-        }
-    });
-    useEffect(() => {
-        try {
-            const root = document.documentElement;
-            if (darkMode) root.classList.add("dark");
-            else root.classList.remove("dark");
-            localStorage.setItem("theme", darkMode ? "dark" : "light");
-        } catch {}
-    }, [darkMode]);
     return (
         <header className="flex place-content-between p-4">
             <Button onClick={() => toggleSidebar()} variant="ghost" size="icon">
                 {state == "collapsed" ? <SidebarOpenIcon /> : <SidebarCloseIcon />}
             </Button>
-            <Button
-                onClick={() => setDarkMode((v) => !v)}
-                variant="ghost" size="icon" aria-pressed={darkMode}
-            >
-                {darkMode ? <SunIcon /> : <MoonIcon />}
-            </Button>
         </header>
     );
 }

 import { Button } from "./ui/button";
 import { useSidebar } from "./ui/sidebar";
+import { ThemeToggle } from "./theme-toggle";
+import { SidebarCloseIcon, SidebarOpenIcon } from "lucide-react";
 export function Header() {
     const { state, toggleSidebar } = useSidebar();
     return (
         <header className="flex place-content-between p-4">
             <Button onClick={() => toggleSidebar()} variant="ghost" size="icon">
                 {state == "collapsed" ? <SidebarOpenIcon /> : <SidebarCloseIcon />}
             </Button>
+            <ThemeToggle />
         </header>
     );
 }

frontend/app/components/theme-toggle.tsx ADDED Viewed

	@@ -0,0 +1,36 @@

+import { Button } from "./ui/button";
+import { useEffect, useState } from "react";
+import { MoonIcon, SunIcon } from "lucide-react";
+export function ThemeToggle() {
+    const [darkMode, setDarkMode] = useState<boolean>(() => {
+        try {
+            const stored = localStorage.getItem("theme");
+            if (stored) return stored === "dark";
+            return (
+                typeof window !== "undefined" &&
+                window.matchMedia?.("(prefers-color-scheme: dark)")?.matches
+            );
+        } catch {
+            return false;
+        }
+    });
+    useEffect(() => {
+        try {
+            const root = document.documentElement;
+            if (darkMode) root.classList.add("dark");
+            else root.classList.remove("dark");
+            localStorage.setItem("theme", darkMode ? "dark" : "light");
+        } catch {}
+    }, [darkMode]);
+    return (
+        <Button
+            onClick={() => setDarkMode((v) => !v)}
+            variant="ghost" size="icon" aria-pressed={darkMode}
+        >
+            {darkMode ? <SunIcon /> : <MoonIcon />}
+        </Button>
+    );
+}

frontend/app/root.tsx CHANGED Viewed

@@ -3,20 +3,24 @@ import {
     Links,
     Outlet,
     Scripts,
     ScrollRestoration,
     isRouteErrorResponse,
 } from "react-router";
 import type { Route } from "./+types/root";
 import { Header } from "./components/header";
 import { ToastContainer } from "react-toastify";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { SidebarProvider } from "./components/sidebar-provider";
 import "./app.css";
 export const queryClient = new QueryClient();
 export function Layout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="en">
             <head>
@@ -31,10 +35,19 @@ export function Layout({ children }: { children: React.ReactNode }) {
             </head>
             <body>
                 <QueryClientProvider client={queryClient}>
-                    <SidebarProvider>
-                        <Header />
-                        <main>{children}</main>
-                    </SidebarProvider>
                 </QueryClientProvider>
                 <ToastContainer />
                 <ScrollRestoration />

     Links,
     Outlet,
     Scripts,
+    useLocation,
     ScrollRestoration,
     isRouteErrorResponse,
 } from "react-router";
 import type { Route } from "./+types/root";
 import { Header } from "./components/header";
 import { ToastContainer } from "react-toastify";
+import { ThemeToggle } from "./components/theme-toggle";
 import { SidebarProvider } from "./components/sidebar-provider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "./app.css";
 export const queryClient = new QueryClient();
 export function Layout({ children }: { children: React.ReactNode }) {
+    const { pathname } = useLocation();
     return (
         <html lang="en">
             <head>
             </head>
             <body>
                 <QueryClientProvider client={queryClient}>
+                    {pathname.startsWith("/registration") ? (
+                        <>
+                            <header className="flex flex-row-reverse place-content-between p-4">
+                                <ThemeToggle />
+                            </header>
+                            <main>{children}</main>
+                        </>
+                    ) : (
+                        <SidebarProvider>
+                            <Header />
+                            <main>{children}</main>
+                        </SidebarProvider>
+                    )}
                 </QueryClientProvider>
                 <ToastContainer />
                 <ScrollRestoration />

frontend/app/routes.ts CHANGED Viewed

@@ -6,4 +6,5 @@ export default [
 	route("jobs/:id", "routes/jobs.$id.tsx"),
 	route("jobs/:jid/assessments/:id", "routes/jobs.$jid.assessments.$id.tsx"),
 	route("dashboard", "routes/dashboard.tsx"),
 ] satisfies RouteConfig;

 	route("jobs/:id", "routes/jobs.$id.tsx"),
 	route("jobs/:jid/assessments/:id", "routes/jobs.$jid.assessments.$id.tsx"),
 	route("dashboard", "routes/dashboard.tsx"),
+	route("registration", "routes/registration.tsx"),
 ] satisfies RouteConfig;

frontend/app/routes/registration.tsx ADDED Viewed

	@@ -0,0 +1,14 @@

+import type { Route } from "./+types/registration";
+export function meta({}: Route.MetaArgs) {
+    return [
+        { title: "Registration" },
+        {
+            name: "description",
+            content: "Login to access your account or create a new one.",
+        },
+    ];
+}
+export default function Registration() {
+}