import React, { useState } from 'react'; import { Menu, Palette, Zap, ChevronDown, LogOut, Settings, User, ShoppingCart } from 'lucide-react'; import { Button } from '../ui/button'; import { useTheme } from '../../context/ThemeContext'; import { SearchInput } from '../ui/input'; import { Notification } from '../../types'; import { useCart } from '../../context/CartContext'; import { NotificationBell } from '../notifications/NotificationBell'; interface NavbarProps { onNavigate: (viewId: string) => void; onLogout: () => void; } const mockNotifications: Notification[] = [ { id: '1', type: 'system', text: 'System Update v2.0 Live', time: '2m', read: false }, { id: '2', type: 'like', text: 'Neon_Dev liked your track', time: '15m', read: false, actionUrl: '/track/1' }, { id: '3', type: 'follow', text: 'Skrillex started following you', time: '1h', read: true, actionUrl: '/u/skrillex' }, ]; export const Navbar: React.FC = ({ onNavigate, onLogout }) => { const { toggleTheme, theme } = useTheme(); const { itemCount } = useCart(); const [showUserMenu, setShowUserMenu] = useState(false); const [notifications, setNotifications] = useState(mockNotifications); const handleMarkAllRead = () => { setNotifications(prev => prev.map(n => ({ ...n, read: true }))); }; const handleRead = (id: string) => { setNotifications(prev => prev.map(n => n.id === id ? { ...n, read: true } : n)); }; return ( <> {/* Backdrop for closing menus - Lower z-index than Navbar (z-40) but higher than content */} {showUserMenu && (
setShowUserMenu(false)} /> )} ); };