Switched to typescript instead of javascript

2026-03-11 00:17:15 +01:00
parent 4751f18ee6
commit 368dc41172
20 changed files with 550 additions and 263 deletions
@@ -0,0 +1,52 @@
+// frontend/src/components/Layout/Navbar.tsx
+
+import { Lock, LogOut, Volleyball } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+interface NavbarProps {
+    title: string;
+    subtitle: string;
+    isAdmin: boolean;
+    onLogout: () => void;
+}
+
+export default function Navbar({ title, subtitle, isAdmin, onLogout }: NavbarProps) {
+    return (
+        <nav className="transition-colors bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-300 dark:border-zinc-800 sticky top-0 z-100 px-3 sm:px-6 py-3 sm:py-4 flex justify-between items-center shadow-md shrink-0">
+            <Link to="/" className="flex items-center gap-2 sm:gap-4 cursor-pointer group select-none shrink-0">
+                <div className="p-1.5 sm:p-2.5 bg-orange-600 rounded-xl group-hover:rotate-12 transition-transform shadow-lg shadow-orange-600/30 active:scale-90">
+                    <Volleyball className="text-white" size={20} />
+                </div>
+                <div className="hidden sm:block">
+                    <h1 className="text-2xl font-black tracking-tighter leading-none text-zinc-900 dark:text-white">VolleyManager</h1>
+                    <p className="text-[9px] font-black text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mt-0.5">Tournament Ops</p>
+                </div>
+            </Link>
+
+            <div className="transition-colors absolute left-1/2 -translate-x-1/2 text-center pointer-events-none w-full max-w-35 xs:max-w-[180px] sm:max-w-100">
+                <div className="font-black uppercase text-[10px] sm:text-sm tracking-widest sm:tracking-[0.3em] text-zinc-900 dark:text-white truncate leading-none mb-1">
+                    {title || 'Dashboard'}
+                </div>
+                {subtitle && (
+                    <div className="text-[8px] sm:text-[10px] font-black text-zinc-400 dark:text-zinc-500 uppercase tracking-widest leading-none">
+                        {subtitle}
+                    </div>
+                )}
+            </div>
+
+            <div className="flex gap-2 sm:gap-4 items-center shrink-0">
+                {isAdmin ? (
+                    <>
+                        <button onClick={onLogout} title="Sign Out" className="text-zinc-400 hover:text-red-500 transition active:scale-90 shrink-0">
+                            <LogOut size={18} className="sm:size-5.5" />
+                        </button>
+                    </>
+                ) : (
+                    <Link to="/login" className="text-orange-600 font-black flex items-center gap-1.5 text-[9px] sm:text-[10px] uppercase tracking-widest hover:text-orange-500 transition group p-1.5 sm:p-2 rounded-xl hover:bg-orange-50 dark:hover:bg-orange-950/20">
+                        <Lock size={12} className="sm:size-3.5 group-hover:-translate-y-0.5 transition-transform" /> <span className="hidden xs:inline">Login</span>
+                    </Link>
+                )}
+            </div>
+        </nav>
+    );
+}