Notification UI and house invitation

src/components/Notification.tsx

@@ -0,0 +1,83 @@
+import { notificationQueries } from '@/service/queries';
+import { formatTimeAgo } from '@/utils/helper';
+import { cn } from '@lib/utils';
+import { m } from '@paraglide/messages';
+import { BellIcon } from '@phosphor-icons/react';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { Button } from '@ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@ui/dropdown-menu';
+import { Item, ItemContent, ItemDescription, ItemTitle } from './ui/item';
+
+const Notification = () => {
+  const { data: notifications } = useQuery(notificationQueries.topFive());
+
+  if (!notifications) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon-lg"
+          variant="ghost"
+          className="relative rounded-full"
+        >
+          <BellIcon
+            size={32}
+            className={cn('origin-top', { 'animate-bell-ring': true })}
+          />
+          {true && (
+            <span className="absolute top-1 right-1 rounded-full w-2 h-2 bg-red-600"></span>
+          )}
+          <span className="sr-only">{m.ui_label_notifications()}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-sm min-w-56 rounded-lg">
+        <DropdownMenuLabel className="font-bold text-black">
+          {m.ui_label_notifications()}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {notifications.map((notify) => {
+            return (
+              <DropdownMenuItem key={notify.id}>
+                <Item className="p-0">
+                  <ItemContent>
+                    <ItemTitle className="text-sm">
+                      {m.templates_title_notification({
+                        title: notify.title as Parameters<
+                          typeof m.templates_title_notification
+                        >[0]['title'],
+                      })}
+                    </ItemTitle>
+                    <ItemDescription>
+                      {formatTimeAgo(new Date(notify.createdAt))}
+                    </ItemDescription>
+                  </ItemContent>
+                </Item>
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuGroup>
+        <DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link to="/management/notifications" className="cursor-pointer">
+              {m.ui_view_all_notifications()}
+            </Link>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default Notification;