Loading...
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
notifications | Notification[] | defaultNotifications | Array of notification objects |
icon | React.ReactNode | undefined | Custom icon for the trigger button |
maxHeight | string | "64" | Maximum height of dropdown content |
Notification Interface
interface Notification {
id: number;
type: "message" | "alert" | "success";
message: string;
timestamp?: string;
read?: boolean;
}Features
- Notification Types: Support for message, alert, and success notifications
- Read States: Visual distinction between read and unread notifications
- Unread Count: Badge showing number of unread notifications
- Type Icons: Different icons for each notification type
- Timestamps: Optional timestamp display for each notification
- Scrollable Content: Handles large numbers of notifications with scrolling
Usage
import NotificationsPopover, {
Notification,
} from "@/components/ui/notifications-popover";
export default function Example() {
const notifications: Notification[] = [
{
id: 1,
type: "message",
message: "New message from Alice",
timestamp: "Just now",
},
{
id: 2,
type: "alert",
message: "Server backup failed",
timestamp: "5m ago",
},
{
id: 3,
type: "success",
message: "Database restored successfully",
timestamp: "10m ago",
read: true,
},
];
return (
<div className="p-6">
<NotificationsPopover notifications={notifications} maxHeight="80" />
</div>
);
}