Add login, role-based portals, and browser-local admin image upload

2026-06-27 16:33:20 -05:00
parent e4b30d6dfd
commit 26559d4cf8
6 changed files with 485 additions and 0 deletions
@@ -0,0 +1,82 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/hooks/useAuth';
+
+const links = [
+  { href: '/', label: 'Home' },
+  { href: '/rooms', label: 'Rooms' },
+  { href: '/coffee', label: 'Coffee' },
+  { href: '/landscape', label: 'Landscape' },
+  { href: '/comments', label: 'Comments' },
+];
+
+export default function Navbar() {
+  const { isLoggedIn, logout } = useAuth();
+  const router = useRouter();
+
+  const handleLogout = () => {
+    logout();
+    router.push('/login');
+  };
+
+  return (
+    <nav
+      style={{
+        position: 'sticky',
+        top: 0,
+        display: 'flex',
+        gap: '1.5rem',
+        alignItems: 'center',
+        padding: '1rem 2rem',
+        background: '#1a1a1a',
+        color: '#fff',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+      }}
+    >
+      <Link href="/" style={{ fontWeight: 700, color: '#fff', textDecoration: 'none' }}>
+        La Huasca
+      </Link>
+      {links.map((link) => (
+        <Link
+          key={link.href}
+          href={link.href}
+          style={{ color: '#e5e5e5', textDecoration: 'none' }}
+        >
+          {link.label}
+        </Link>
+      ))}
+      {isLoggedIn ? (
+        <button
+          onClick={handleLogout}
+          style={{
+            marginLeft: 'auto',
+            background: 'transparent',
+            border: '1px solid #fff',
+            color: '#fff',
+            padding: '0.4rem 0.75rem',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Logout
+        </button>
+      ) : (
+        <Link
+          href="/login"
+          style={{
+            marginLeft: 'auto',
+            color: '#e5e5e5',
+            textDecoration: 'none',
+            border: '1px solid #e5e5e5',
+            padding: '0.4rem 0.75rem',
+            borderRadius: '4px',
+          }}
+        >
+          Login
+        </Link>
+      )}
+    </nav>
+  );
+}