57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { ClipboardList, LayoutGrid, MessageCircle } from 'lucide-react';
|
||
import type { Appeal, TabId } from '../types';
|
||
import { NotificationsPanel } from './NotificationsPanel';
|
||
import { ProfilePanel } from './ProfilePanel';
|
||
import './Header.css';
|
||
|
||
interface HeaderProps {
|
||
activeTab: TabId;
|
||
onTabChange: (tab: TabId) => void;
|
||
appeals: Appeal[];
|
||
}
|
||
|
||
export function Header({ activeTab, onTabChange, appeals }: HeaderProps) {
|
||
return (
|
||
<header className="header">
|
||
<div className="header-inner">
|
||
<h1 className="header-brand">ИТ-Ассистент</h1>
|
||
|
||
<nav className="header-nav">
|
||
<button
|
||
type="button"
|
||
className={`header-nav-item ${activeTab === 'vitrina' ? 'active' : ''}`}
|
||
onClick={() => onTabChange('vitrina')}
|
||
>
|
||
<MessageCircle size={18} strokeWidth={2} />
|
||
<span>Чат</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`header-nav-item ${activeTab === 'appeals' ? 'active' : ''}`}
|
||
onClick={() => onTabChange('appeals')}
|
||
>
|
||
<ClipboardList size={18} strokeWidth={2} />
|
||
<span>История моих обращений</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`header-nav-item ${activeTab === 'catalog' ? 'active' : ''}`}
|
||
onClick={() => onTabChange('catalog')}
|
||
>
|
||
<LayoutGrid size={18} strokeWidth={2} />
|
||
<span>Каталог услуг</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div className="header-actions">
|
||
<button type="button" className="header-admin-btn">
|
||
Администратор
|
||
</button>
|
||
<NotificationsPanel onNavigate={onTabChange} />
|
||
<ProfilePanel appeals={appeals} onNavigate={onTabChange} />
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|