45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
// frontend/src/components/NotificationDot.tsx
|
|
|
|
type NotificationDotProps = {
|
|
title?: string
|
|
label?: string
|
|
className?: string
|
|
pingClassName?: string
|
|
dotClassName?: string
|
|
}
|
|
|
|
function classNames(...classes: Array<string | false | null | undefined>) {
|
|
return classes.filter(Boolean).join(' ')
|
|
}
|
|
|
|
export default function NotificationDot({
|
|
title = 'Neue Benachrichtigung',
|
|
label = 'Neue Benachrichtigung',
|
|
className,
|
|
pingClassName,
|
|
dotClassName,
|
|
}: NotificationDotProps) {
|
|
return (
|
|
<span
|
|
title={title}
|
|
aria-label={label}
|
|
role="status"
|
|
className={classNames('relative inline-flex size-2 shrink-0', className)}
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className={classNames(
|
|
'absolute inline-flex h-full w-full animate-ping rounded-full bg-indigo-400 opacity-75',
|
|
pingClassName,
|
|
)}
|
|
/>
|
|
<span
|
|
aria-hidden="true"
|
|
className={classNames(
|
|
'relative inline-flex size-2 rounded-full bg-indigo-600 dark:bg-indigo-400',
|
|
dotClassName,
|
|
)}
|
|
/>
|
|
</span>
|
|
)
|
|
} |