124 lines
4.4 KiB
TypeScript
124 lines
4.4 KiB
TypeScript
import React from 'react';
|
||
import { MessageSquare, Mail, Hash, Users, Settings, Plus } from 'lucide-react';
|
||
import { CommunicationTab } from '../types';
|
||
import { Button, Tabs } from '@krona/ui';
|
||
|
||
interface CommunicationsHeaderProps {
|
||
activeTab: CommunicationTab;
|
||
onTabChange: (tab: CommunicationTab) => void;
|
||
onAddChannel: () => void;
|
||
unreadChats: number;
|
||
unreadEmails: number;
|
||
unreadChannels: number;
|
||
}
|
||
|
||
export function CommunicationsHeader({
|
||
activeTab,
|
||
onTabChange,
|
||
onAddChannel,
|
||
unreadChats,
|
||
unreadEmails,
|
||
unreadChannels,
|
||
}: CommunicationsHeaderProps) {
|
||
const tabItems = [
|
||
{
|
||
id: 'messengers',
|
||
label: 'Мессенджеры',
|
||
badge: unreadChats > 0 ? unreadChats : undefined,
|
||
icon: <MessageSquare className="w-4 h-4" />,
|
||
},
|
||
{
|
||
id: 'email',
|
||
label: 'Email',
|
||
badge: unreadEmails > 0 ? unreadEmails : undefined,
|
||
icon: <Mail className="w-4 h-4" />,
|
||
},
|
||
{
|
||
id: 'channels',
|
||
label: 'Каналы',
|
||
badge: unreadChannels > 0 ? unreadChannels : undefined,
|
||
icon: <Hash className="w-4 h-4" />,
|
||
},
|
||
{
|
||
id: 'contacts',
|
||
label: 'Контакты',
|
||
icon: <Users className="w-4 h-4" />,
|
||
},
|
||
{
|
||
id: 'settings',
|
||
label: 'Настройки',
|
||
icon: <Settings className="w-4 h-4" />,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<header className="relative bg-[var(--krona-surface)] border-b border-[var(--krona-border-subtle)] px-3 sm:px-6 pt-3 sm:pt-5 pb-2 sm:pb-3 shrink-0 overflow-hidden">
|
||
<div className="hidden lg:flex items-center gap-3 absolute right-8 top-4 text-right pointer-events-none opacity-50 font-serif italic text-sm text-[var(--krona-text-secondary)]">
|
||
<span>Больше, чем общение с поддержкой</span>
|
||
<svg
|
||
className="w-8 h-8 text-[var(--krona-gold)] shrink-0"
|
||
viewBox="0 0 32 32"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
strokeWidth="1.2"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M16 28C16 18 20 10 28 6" strokeLinecap="round" />
|
||
<path d="M16 24C12 20 8 18 4 17" strokeLinecap="round" />
|
||
<path d="M16 19C20 16 24 15 27 15" strokeLinecap="round" />
|
||
<path d="M16 14C12 11 9 10 6 10" strokeLinecap="round" />
|
||
<path d="M18 10C21 8 24 7 26 7" strokeLinecap="round" />
|
||
<circle cx="28" cy="6" r="1.5" fill="currentColor" />
|
||
<circle cx="4" cy="17" r="1.5" fill="currentColor" />
|
||
<circle cx="27" cy="15" r="1.5" fill="currentColor" />
|
||
<circle cx="6" cy="10" r="1.5" fill="currentColor" />
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-3 mb-2 sm:mb-4">
|
||
<div>
|
||
<h1 className="text-xl sm:text-3xl font-bold font-serif text-[var(--krona-text-primary)]">
|
||
Коммуникации
|
||
</h1>
|
||
<p className="hidden sm:block text-sm text-[var(--krona-text-secondary)] mt-1">
|
||
Все сообщения, почта и каналы компании в одном пространстве
|
||
</p>
|
||
</div>
|
||
|
||
{/* Mobile compact action button */}
|
||
<button
|
||
type="button"
|
||
onClick={onAddChannel}
|
||
className="sm:hidden h-10 w-10 rounded-lg border border-[var(--krona-border)] bg-[var(--krona-surface)] hover:bg-[var(--krona-surface-hover)] text-[var(--krona-primary)] font-medium flex items-center justify-center shrink-0 transition-colors active:scale-95"
|
||
aria-label="Добавить канал"
|
||
>
|
||
<Plus className="w-4 h-4 text-[var(--krona-primary)]" />
|
||
<span className="sr-only">Добавить канал</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between gap-3 min-w-0">
|
||
<div className="flex-1 min-w-0 overflow-x-auto scrollbar-none">
|
||
<Tabs
|
||
items={tabItems}
|
||
activeId={activeTab}
|
||
onChange={(id) => onTabChange(id as CommunicationTab)}
|
||
className="border-b-0 whitespace-nowrap"
|
||
/>
|
||
</div>
|
||
|
||
{/* Desktop / Tablet full button */}
|
||
<div className="hidden sm:flex items-center gap-2 shrink-0">
|
||
<Button
|
||
variant="secondary"
|
||
size="sm"
|
||
onClick={onAddChannel}
|
||
leftIcon={<Plus className="w-4 h-4 text-[var(--krona-primary)]" />}
|
||
>
|
||
Добавить канал
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|