Spaces:
Running
Running
File size: 2,106 Bytes
1e2158c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import React from 'react';
import { Bell, User, Menu } from 'lucide-react';
import { useUserStore } from '@/store/userStore';
interface TopBarProps {
onMenuClick?: () => void;
}
const TopBar: React.FC<TopBarProps> = ({ onMenuClick }) => {
const user = useUserStore((state) => state.user);
return (
<header className="h-16 sm:h-14 lg:h-16 border-b border-dark-border bg-dark-surface flex items-center justify-between px-4">
{/* Left section - Mobile menu button */}
<div className="lg:hidden">
<button
onClick={onMenuClick}
className="p-2 hover:bg-dark-hover rounded-lg transition-colors"
aria-label="Toggle menu"
>
<Menu className="w-6 h-6 text-gray-400" />
</button>
</div>
{/* Center - Empty on mobile, can add breadcrumbs */}
<div className="hidden lg:block flex-1"></div>
{/* Right section */}
<div className="flex items-center space-x-3">
{/* Notifications */}
<button className="relative p-2 hover:bg-dark-hover rounded-lg transition-colors">
<Bell className="w-5 h-5 text-gray-400" />
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
</button>
{/* User */}
<div className="hidden sm:flex items-center space-x-2 pl-3 border-l border-dark-border">
<div className="text-right">
<div className="text-xs font-medium text-gray-200">{user?.name}</div>
<div className="text-xs text-gray-500">{user?.email}</div>
</div>
<div className="w-9 h-9 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center flex-shrink-0">
<User className="w-5 h-5 text-white" />
</div>
</div>
{/* Mobile user avatar only */}
<div className="sm:hidden w-9 h-9 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center">
<User className="w-5 h-5 text-white" />
</div>
</div>
</header>
);
};
export default TopBar;
|