Loading...
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | NotificationItem[] | defaultNotifications | Array of notification items |
NotificationItem Interface
interface NotificationItem {
id: string;
message: string;
time: string;
type?: "info" | "link" | "default";
href?: string;
}Features
- Multiple Types: Support for info, link, and default notification types
- Info Tooltips: Info notifications show tooltips with additional context
- Clickable Links: Link notifications are clickable and navigate to specified URLs
- Visual Indicators: Different styling for each notification type
- Next.js Integration: Uses Next.js Link component for navigation
- Responsive Design: Adapts to different screen sizes
Usage
import NotificationsAlt, {
NotificationItem,
} from "@/components/ui/notification-alt";
export default function Example() {
const notifications: NotificationItem[] = [
{
id: "1",
message: "Welcome to the platform 🎉",
time: "just now",
type: "default",
},
{
id: "2",
message: "Check out our new documentation section",
time: "10m ago",
type: "link",
href: "/docs",
},
{
id: "3",
message: "System maintenance scheduled for tonight",
time: "2h ago",
type: "info",
},
];
return (
<div className="p-6">
{/* Default notifications */}
<NotificationsAlt />
{/* Custom notifications */}
<NotificationsAlt items={notifications} />
</div>
);
}