110 lines
4.0 KiB
TypeScript
110 lines
4.0 KiB
TypeScript
'use client';
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { User } from '@/lib/session';
|
|
import { fetchPreferences } from '@/lib/storage';
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Cigarette, Leaf, LogOut, Home, ChevronDown } from 'lucide-react';
|
|
|
|
interface UserHeaderProps {
|
|
user: User;
|
|
}
|
|
|
|
export function UserHeader({ user }: UserHeaderProps) {
|
|
const [userName, setUserName] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const loadUserName = async () => {
|
|
const prefs = await fetchPreferences();
|
|
setUserName(prefs.userName);
|
|
};
|
|
loadUserName();
|
|
}, []);
|
|
|
|
const initials = [user.firstName?.[0], user.lastName?.[0]]
|
|
.filter(Boolean)
|
|
.join('')
|
|
.toUpperCase() || user.email[0].toUpperCase();
|
|
|
|
const handleLogout = () => {
|
|
window.location.href = '/api/auth/logout';
|
|
};
|
|
|
|
const handleNavigate = (path: string) => {
|
|
router.push(path);
|
|
};
|
|
|
|
return (
|
|
<header className="border-b border-white/10" style={{
|
|
background: 'linear-gradient(135deg, rgba(10, 10, 20, 0.95) 0%, rgba(20, 30, 60, 0.9) 50%, rgba(15, 25, 50, 0.95) 100%)',
|
|
backdropFilter: 'blur(10px)',
|
|
}}>
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<h1
|
|
className="text-2xl font-bold text-white cursor-pointer hover:opacity-80 transition-opacity"
|
|
onClick={() => handleNavigate('/')}
|
|
>
|
|
QuitTraq
|
|
</h1>
|
|
{userName && (
|
|
<p className="text-white/90 text-lg hidden sm:block">
|
|
Welcome {userName}, you got this!
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className="flex items-center gap-2 px-3 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-white/30">
|
|
<Avatar className="h-8 w-8 ring-2 ring-white/30">
|
|
<AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
|
|
<AvatarFallback className="bg-white/20 text-white text-sm">{initials}</AvatarFallback>
|
|
</Avatar>
|
|
<ChevronDown className="h-4 w-4 text-white" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" sideOffset={8}>
|
|
<DropdownMenuItem onClick={() => handleNavigate('/')}>
|
|
<Home className="mr-3 h-4 w-4 text-white/70" />
|
|
<span>Dashboard</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => handleNavigate('/track/nicotine')}>
|
|
<Cigarette className="mr-3 h-4 w-4 text-red-400" />
|
|
<span>Track Nicotine Usage</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => handleNavigate('/track/marijuana')}>
|
|
<Leaf className="mr-3 h-4 w-4 text-green-400" />
|
|
<span>Track Marijuana Usage</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={handleLogout} className="text-red-400 hover:text-red-300">
|
|
<LogOut className="mr-3 h-4 w-4" />
|
|
<span>Sign out</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
{userName && (
|
|
<div className="sm:hidden container mx-auto px-4 pb-3">
|
|
<p className="text-white/90 text-base">
|
|
Welcome {userName}, you got this!
|
|
</p>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|