Notification Bell

Dropdown notification center with unread badges, actions, and clear all functionality.

Preview

Usage

import { NotificationBell } from "@/components/profile"

<NotificationBell
  notifications={[
    { id: "1", type: "like", title: "New likes", message: "150 new likes", timestamp: "2m ago", isRead: false },
    { id: "2", type: "follow", title: "New follower", message: "A user followed you", timestamp: "1h ago", isRead: true },
  ]}
  onMarkAsRead={(id) => markRead(id)}
  onMarkAllRead={() => markAllRead()}
  onDelete={(id) => deleteNotification(id)}
  onClear={() => clearAll()}
/>

Notification Types

comment

purchase

mention

system

Props

Prop	Type	Description
notifications	NotificationItem[]	Array of notifications
onMarkAsRead	(id) => void	Mark single as read
onMarkAllRead	() => void	Mark all as read
onDelete	(id) => void	Delete notification
onClear	() => void	Clear all