Create a notification system UI with the following: 1. A bell icon popover in the top-right corner of the app header that: • Shows the 5 most recent unread notifications. • Each notification has an icon based on the type (MENTION, ASSIGNED, RESOURCE_UPDATE, etc.), title, message preview, timestamp, and a “mark as read” button. • Clicking a notification navigates to the related resource (URL can be a placeholder). • If no unread notifications, show “You’re all caught up!” • A “View all” link at the bottom opens the full notifications page. 2. A full page at /notifications that: • Lists all notifications for the user, grouped by date (e.g., “Today”, “This Week”, “Earlier”). • Each item shows: type icon, title, message, related resource name (if available), timestamp, and read/unread status. • Allow filtering (All, Unread, Read) and marking all as read.
Use Tailwind CSS and shadcn/ui components for styling. Assume notification objects have this shape:
{ id: string; userId: string; type: "MENTION" | "ASSIGNED" | "RESOURCE_UPDATE"; status: "UNREAD" | "READ"; title: string; message?: string; relatedResource?: { type: string; id: string; }; createdAt: string; // ISO date string }
I'll create a comprehensive notification system UI based on your requirements. This will include both the bell icon popover and the full notifications page.
I've created a complete notification system UI with both a bell icon popover and a full notifications page. Here's a breakdown of what I've implemented:
Each notification includes:
/notificationsEach notification shows:
Components:
Header: Contains the app navigation and notification bellNotificationPopover: The bell icon with popover functionalityNotificationItem: Shared component for rendering notifications in both viewsData Management:
Created a useNotifications hook that provides:
Styling:
User Experience:
This implementation follows all the requirements you specified and provides a clean, user-friendly notification system.