Frontend v.0.1

2026-02-12 17:29:24 +01:00
parent f8fe3eb991
commit c12d962da0
20 changed files with 2087 additions and 181 deletions
@@ -0,0 +1,51 @@
+// frontend/src/components/Layout/Navbar.jsx
+
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Volleyball, LogOut, Lock } from 'lucide-react';
+
+export default function Navbar({ title, subtitle, isAdmin }) {
+    const location = useLocation();
+    const isDashboard = location.pathname === '/';
+
+    return (
+        <nav className="bg-white/95 dark:bg-zinc-900/95 backdrop-blur-lg border-b border-zinc-300 dark:border-zinc-800 sticky top-0 z-[100] px-6 py-4 flex justify-between items-center shadow-sm">
+            <Link to="/" className="flex items-center gap-4 cursor-pointer group select-none shrink-0">
+                <div className="p-2.5 bg-orange-600 rounded-xl group-hover:rotate-12 transition-transform shadow-lg shadow-orange-600/30">
+                    <Volleyball className="text-white" size={24} />
+                </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-[10px] font-black text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mt-0.5">Tournament Ops</p>
+                </div>
+            </Link>
+
+            <div className="absolute left-1/2 -translate-x-1/2 text-center pointer-events-none">
+                <div className="font-black uppercase text-sm tracking-[0.3em] text-zinc-900 dark:text-white truncate leading-none mb-1">
+                    {title || 'Dashboard'}
+                </div>
+                {subtitle && (
+                    <div className="text-[10px] font-black text-zinc-400 dark:text-zinc-500 uppercase tracking-widest leading-none">
+                        {subtitle}
+                    </div>
+                )}
+            </div>
+
+            <div className="flex gap-4 items-center">
+                {isAdmin ? (
+                    <button
+                        onClick={() => { localStorage.removeItem('volleyToken'); window.location.reload(); }}
+                        className="text-zinc-400 hover:text-red-500 transition active:scale-90"
+                        title="Logout"
+                    >
+                        <LogOut size={22} />
+                    </button>
+                ) : (
+                    <Link to="/login" className="text-orange-600 font-black flex items-center gap-2 text-[10px] uppercase tracking-widest hover:text-orange-500 transition group p-2 rounded-xl hover:bg-orange-50 dark:hover:bg-orange-950/20">
+                        <Lock size={14} className="group-hover:-translate-y-0.5 transition-transform" /> <span>Login</span>
+                    </Link>
+                )}
+            </div>
+        </nav>
+    );
+}