47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { Button } from './ui'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface NotificationBadgeButtonProps {
|
|
unreadCount: number
|
|
onClick: () => void
|
|
}
|
|
|
|
export function NotificationBadgeButton({ unreadCount, onClick }: NotificationBadgeButtonProps): React.ReactElement {
|
|
const ariaLabel = unreadCount > 0
|
|
? `${unreadCount} ${unreadCount === 1 ? t('notifications.badge.unread.singular') : t('notifications.badge.unread.plural')}`
|
|
: t('notifications.badge.noUnread')
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
onClick={onClick}
|
|
className="relative p-2 text-gray-600 hover:text-gray-900"
|
|
aria-label={ariaLabel}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
|
|
/>
|
|
</svg>
|
|
{unreadCount > 0 && (
|
|
<>
|
|
<span className="absolute top-0 right-0 w-2 h-2 bg-orange-500 rounded-full transform translate-x-1/2 -translate-y-1/2" />
|
|
<span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">
|
|
{unreadCount > 99 ? '99+' : unreadCount}
|
|
</span>
|
|
</>
|
|
)}
|
|
</Button>
|
|
)
|
|
}
|