64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { Button } from './ui'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface NotificationPanelHeaderProps {
|
|
unreadCount: number
|
|
onMarkAllAsRead: () => void
|
|
onClose: () => void
|
|
}
|
|
|
|
function MarkAllAsReadButton({ unreadCount, onMarkAllAsRead }: { unreadCount: number; onMarkAllAsRead: () => void }): React.ReactElement | null {
|
|
if (unreadCount === 0) {
|
|
return null
|
|
}
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="small"
|
|
onClick={onMarkAllAsRead}
|
|
className="text-sm text-blue-600 hover:text-blue-700"
|
|
>
|
|
{t('notification.markAllAsRead')}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
function CloseButton({ onClose }: { onClose: () => void }): React.ReactElement {
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="small"
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-600 p-0 min-w-0"
|
|
aria-label={t('notification.close')}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export function NotificationPanelHeader({
|
|
unreadCount,
|
|
onMarkAllAsRead,
|
|
onClose,
|
|
}: NotificationPanelHeaderProps): React.ReactElement {
|
|
return (
|
|
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
|
<h3 className="text-lg font-semibold text-gray-900">{t('notification.title')}</h3>
|
|
<div className="flex items-center gap-2">
|
|
<MarkAllAsReadButton unreadCount={unreadCount} onMarkAllAsRead={onMarkAllAsRead} />
|
|
<CloseButton onClose={onClose} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|