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,
|
realtime: params.realtime,
|
||||||
});
|
});
|
||||||
|
|
||||||
const unread = notifications.filter(
|
|
||||||
(notification) => !notification.dismissed,
|
|
||||||
);
|
|
||||||
|
|
||||||
const timeAgo = (createdAt: string) => {
|
const timeAgo = (createdAt: string) => {
|
||||||
const date = new Date(createdAt);
|
const date = new Date(createdAt);
|
||||||
|
|
||||||
@@ -125,18 +121,18 @@ export function NotificationsPopover(params: {
|
|||||||
return (
|
return (
|
||||||
<Popover modal open={open} onOpenChange={setOpen}>
|
<Popover modal open={open} onOpenChange={setOpen}>
|
||||||
<PopoverTrigger asChild>
|
<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'} />
|
<Bell className={'min-h-4 min-w-4'} />
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className={cn(
|
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>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
|
|||||||
Reference in New Issue
Block a user