← Назад
import { Brain, Moon, Sun, ListTodo, Settings } from 'lucide-react'; import { useTheme } from '../hooks/useTheme'; import { Button } from './ui/button'; import { NotificationCenter } from './NotificationCenter'; import { useState } from 'react'; import { SettingsModal } from './SettingsModal'; interface HeaderProps { onViewTasks?: () => void; onViewBrain?: () => void; } export function Header({ onViewTasks, onViewBrain }: HeaderProps) { const { theme, toggleTheme } = useTheme(); const [settingsOpen, setSettingsOpen] = useState(false); return ( <> <header className="flex items-center justify-between mb-8 pb-6 border-b border-white/10"> <div className="flex items-center gap-4"> <div className="p-3 rounded-2xl bg-gradient-to-br from-purple-500 to-primary"> <Brain className="w-8 h-8 text-white" /> </div> <div className="flex items-center gap-3"> <div> <h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-primary bg-clip-text text-transparent"> Morty's Dashboard </h1> <p className="text-sm text-gray-400 mt-1"> Operational Intelligence • Project Monitoring • Analytics </p> </div> <Button variant="ghost" size="sm" className="rounded-full text-gray-400 hover:text-white px-2 py-2" onClick={() => setSettingsOpen(true)} > <Settings className="w-6 h-6" /> </Button> </div> </div> <div className="flex items-center gap-2 sm:gap-4"> <Button variant="ghost" size="sm" onClick={onViewBrain} className="rounded-xl flex items-center gap-2 px-4 text-purple-400 hover:text-purple-300" > <Brain className="w-5 h-5" /> <span className="hidden sm:inline">Brain</span> </Button> <Button variant="ghost" size="sm" onClick={onViewTasks} className="rounded-xl flex items-center gap-2 px-4" > <ListTodo className="w-5 h-5" /> <span className="hidden sm:inline">Задачи</span> </Button> <NotificationCenter /> <Button variant="ghost" size="sm" onClick={toggleTheme} className="rounded-xl" > {theme === 'dark' ? ( <Sun className="w-5 h-5" /> ) : ( <Moon className="w-5 h-5" /> )} </Button> </div> </header> {settingsOpen && <SettingsModal open={settingsOpen} onOpenChange={setSettingsOpen} />} </> ); }