Notifications Dropdown

​

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

interface Notification {
  id: string;
  title: string;
  message: string;
  time: string;
  avatar?: string;
  avatarFallback: string;
  unread?: boolean;
  actionButtons?: {
    accept?: () => void;
    decline?: () => void;
  };
}

actionButtons: {
  accept: async () => {
    // Call API/Supabase to accept invitation
    await acceptInvitation(notificationId);
    // Remove notification or mark as read
  },
  decline: async () => { /* ... */ }
}