Refactor notifications count and position
The commit primarily addresses two changes related to the notification component. It removes the unread variable that filtered non-dismissed notifications, hence directly using the total notifications count directly. This is displayed on the button. Also, the position of alerts icon was shifted closer to the edge from right-5, top-5 to right-1, top-1.
This commit is contained in:
@@ -54,10 +54,6 @@ export function NotificationsPopover(params: {
|
||||
realtime: params.realtime,
|
||||
});
|
||||
|
||||
const unread = notifications.filter(
|
||||
(notification) => !notification.dismissed,
|
||||
);
|
||||
|
||||
const timeAgo = (createdAt: string) => {
|
||||
const date = new Date(createdAt);
|
||||
|
||||
@@ -125,18 +121,18 @@ export function NotificationsPopover(params: {
|
||||
return (
|
||||
<Popover modal open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className={'h-9 w-9'} variant={'ghost'}>
|
||||
<Button className={'relative h-9 w-9'} variant={'ghost'}>
|
||||
<Bell className={'min-h-4 min-w-4'} />
|
||||
|
||||
<span
|
||||
className={cn(
|
||||
`fade-in animate-in zoom-in absolute right-5 top-5 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
|
||||
`fade-in animate-in zoom-in absolute right-1 top-1 mt-0 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500 text-[0.65rem] text-white`,
|
||||
{
|
||||
hidden: !unread.length,
|
||||
hidden: !notifications.length,
|
||||
},
|
||||
)}
|
||||
>
|
||||
{unread.length}
|
||||
{notifications.length}
|
||||
</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
Reference in New Issue
Block a user