95 lines
5.0 KiB
TypeScript
95 lines
5.0 KiB
TypeScript
import { Menu, Sun, Moon, Bell, User, LogOut } from 'lucide-react';
|
||
import { useState } from 'react';
|
||
import { useAuth } from '../../contexts/AuthContext';
|
||
import { useTheme } from '../../contexts/ThemeContext';
|
||
|
||
interface HeaderProps {
|
||
onMenuClick: () => void;
|
||
}
|
||
|
||
export const Header = ({ onMenuClick }: HeaderProps) => {
|
||
const { user, logout } = useAuth();
|
||
const { mode, toggleTheme } = useTheme();
|
||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||
|
||
return (
|
||
<header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
||
<div className="flex items-center justify-between px-4 py-3">
|
||
<div className="flex items-center">
|
||
<button
|
||
onClick={onMenuClick}
|
||
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden"
|
||
>
|
||
<Menu className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||
</button>
|
||
<h1 className="mr-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||
خوش آمدید
|
||
</h1>
|
||
</div>
|
||
|
||
<div className="flex items-center space-x-4">
|
||
<button
|
||
onClick={toggleTheme}
|
||
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||
>
|
||
{mode === 'dark' ? (
|
||
<Sun className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||
) : (
|
||
<Moon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||
)}
|
||
</button>
|
||
|
||
<button className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors relative">
|
||
<Bell className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||
<span className="absolute top-0 left-0 w-2 h-2 bg-red-500 rounded-full"></span>
|
||
</button>
|
||
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setShowUserMenu(!showUserMenu)}
|
||
className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||
>
|
||
<div className="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
|
||
<span className="text-white text-sm font-medium">
|
||
{user?.first_name?.charAt(0) || 'A'}
|
||
</span>
|
||
</div>
|
||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden md:block">
|
||
{user?.first_name} {user?.last_name}
|
||
</span>
|
||
</button>
|
||
|
||
{showUserMenu && (
|
||
<div className="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
|
||
<div className="py-1">
|
||
<div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
|
||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||
{user?.first_name} {user?.last_name}
|
||
</p>
|
||
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||
{user?.username}
|
||
</p>
|
||
</div>
|
||
<button className="w-full text-right px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center">
|
||
<User className="h-4 w-4 ml-2" />
|
||
پروفایل
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
logout();
|
||
setShowUserMenu(false);
|
||
}}
|
||
className="w-full text-right px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"
|
||
>
|
||
<LogOut className="h-4 w-4 ml-2" />
|
||
خروج
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
};
|