105 lines
4.1 KiB
TypeScript
105 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useAuth } from '../context/AuthContext';
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
|
|
export default function Header() {
|
|
const { user, logout } = useAuth();
|
|
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await logout();
|
|
setIsProfileMenuOpen(false);
|
|
} catch (error) {
|
|
console.error('Failed to log out:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-sm border-b border-foreground/10">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center">
|
|
<span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600">
|
|
Mystery Box
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Navigation */}
|
|
<nav className="hidden md:flex items-center space-x-8">
|
|
<Link href="/boxes" className="text-foreground/80 hover:text-foreground transition-colors">
|
|
Boxes
|
|
</Link>
|
|
<Link href="/inventory" className="text-foreground/80 hover:text-foreground transition-colors">
|
|
Inventory
|
|
</Link>
|
|
<Link href="/trading" className="text-foreground/80 hover:text-foreground transition-colors">
|
|
Trading
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Auth Buttons / Profile */}
|
|
<div className="flex items-center space-x-4">
|
|
{user ? (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
|
|
className="flex items-center space-x-2 text-foreground/80 hover:text-foreground transition-colors"
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 flex items-center justify-center text-white text-sm font-medium">
|
|
{user.email?.[0].toUpperCase()}
|
|
</div>
|
|
<span className="hidden md:inline-block">{user.email}</span>
|
|
</button>
|
|
|
|
{/* Profile Dropdown */}
|
|
{isProfileMenuOpen && (
|
|
<div className="absolute right-0 mt-2 w-48 rounded-lg bg-background border border-foreground/10 shadow-lg py-1">
|
|
<Link
|
|
href="/profile"
|
|
className="block px-4 py-2 text-sm text-foreground/80 hover:bg-foreground/5 transition-colors"
|
|
onClick={() => setIsProfileMenuOpen(false)}
|
|
>
|
|
Profile
|
|
</Link>
|
|
<Link
|
|
href="/settings"
|
|
className="block px-4 py-2 text-sm text-foreground/80 hover:bg-foreground/5 transition-colors"
|
|
onClick={() => setIsProfileMenuOpen(false)}
|
|
>
|
|
Settings
|
|
</Link>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="block w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-foreground/5 transition-colors"
|
|
>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center space-x-4">
|
|
<Link
|
|
href="/auth/login"
|
|
className="text-foreground/80 hover:text-foreground transition-colors"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
<Link
|
|
href="/auth/signup"
|
|
className="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 text-white text-sm font-medium hover:opacity-90 transition-opacity"
|
|
>
|
|
Sign up
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|