99 lines
3.5 KiB
TypeScript
99 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { useStore } from '@/lib/store';
|
|
import { authApi } from '@/lib/api';
|
|
import { Bell, User, LogOut, ChevronDown, Settings } from 'lucide-react';
|
|
import JobTracker from './JobTracker';
|
|
|
|
export default function Header() {
|
|
const router = useRouter();
|
|
const { user, logout } = useStore();
|
|
const [showUserMenu, setShowUserMenu] = useState(false);
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await authApi.logout();
|
|
} catch (err) {
|
|
// Ignore errors
|
|
}
|
|
logout();
|
|
setShowUserMenu(false);
|
|
router.push('/login');
|
|
};
|
|
|
|
return (
|
|
<header className="h-16 bg-forge-dark border-b border-gray-800 flex items-center justify-between px-6">
|
|
{/* Breadcrumb / Title area */}
|
|
<div>
|
|
<h1 className="text-lg font-semibold text-white">Welcome to FORGE AI</h1>
|
|
<p className="text-sm text-gray-500">Creative tools powered by AI to forge your AI skills</p>
|
|
</div>
|
|
|
|
{/* Right side */}
|
|
<div className="flex items-center gap-4">
|
|
{/* Job Tracker */}
|
|
<JobTracker />
|
|
|
|
{/* Notifications */}
|
|
<button className="relative p-2 text-gray-400 hover:text-white transition-colors">
|
|
<Bell className="w-5 h-5" />
|
|
</button>
|
|
|
|
{/* User Menu */}
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowUserMenu(!showUserMenu)}
|
|
className="flex items-center gap-2 p-2 rounded-lg hover:bg-forge-gray transition-colors"
|
|
>
|
|
<div className="w-8 h-8 bg-forge-gray-light rounded-full flex items-center justify-center">
|
|
{user?.avatar_url ? (
|
|
<img
|
|
src={user.avatar_url}
|
|
alt={user.name}
|
|
className="w-8 h-8 rounded-full"
|
|
/>
|
|
) : (
|
|
<User className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
</div>
|
|
<span className="text-sm text-gray-300">{user?.name || 'Test User'}</span>
|
|
<ChevronDown className="w-4 h-4 text-gray-500" />
|
|
</button>
|
|
|
|
{showUserMenu && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-10"
|
|
onClick={() => setShowUserMenu(false)}
|
|
/>
|
|
<div className="absolute right-0 top-full mt-2 w-48 bg-forge-gray border border-gray-700 rounded-lg shadow-xl z-20">
|
|
<div className="p-3 border-b border-gray-700">
|
|
<p className="text-sm font-medium text-white">{user?.name || 'User'}</p>
|
|
<p className="text-xs text-gray-500">{user?.email || ''}</p>
|
|
</div>
|
|
<Link
|
|
href="/settings"
|
|
onClick={() => setShowUserMenu(false)}
|
|
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-forge-dark transition-colors"
|
|
>
|
|
<Settings className="w-4 h-4" />
|
|
Settings
|
|
</Link>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-400 hover:bg-forge-dark transition-colors"
|
|
>
|
|
<LogOut className="w-4 h-4" />
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|