Skip to main content
Location: sabo/src/components/dashboard/notifications-dropdown.tsx

​
When to use

  • Show recent alerts/messages with quick actions without leaving the page.

​
Usage

// In the dashboard header
import { NotificationsDropdown } from "@/components/dashboard/notifications-dropdown";

export function HeaderRight() {
  return (
    <div className="flex items-center gap-2">
      <NotificationsDropdown />
    </div>
  );
}

​
Styling tip

  • Keep each item concise; use badges for counts; prefer lazy loading if needed.

​
Key features

  • Unread badge: Shows count of unread notifications in top-right of bell icon
  • Sample data: Component includes sample notifications array for demonstration
  • Action buttons: Supports accept/decline actions for specific notification types
  • Scroll area: Uses ScrollArea for long lists without breaking layout

​
Steps

1

Replace sample data

The component currently uses sampleNotifications array. Replace with real data from Supabase or your API.
interface Notification {
  id: string;
  title: string;
  message: string;
  time: string;
  avatar?: string;
  avatarFallback: string;
  unread?: boolean;
  actionButtons?: {
    accept?: () => void;
    decline?: () => void;
  };
}
Consider lazy-loading notifications when the dropdown opens to improve initial page load.
2

Implement actions

For notifications with actionButtons, wire up actual handlers (e.g., accept team invite, approve request).
actionButtons: {
  accept: async () => {
    // Call API/Supabase to accept invitation
    await acceptInvitation(notificationId);
    // Remove notification or mark as read
  },
  decline: async () => { /* ... */ }
}
3

Mark as read

Update notification state when clicked or dismissed. This updates the unread count badge.