Notifications Filter Demo

Installation

Props

Prop	Type	Default	Description
`items`	`NotificationItem[]`	`defaultNotifications`	Array of notification items
`placement`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Popover placement position

NotificationItem Interface

interface NotificationItem {
  id: string;
  category: "updates" | "alerts" | "reminders";
  icon: React.ReactNode;
  title: string;
  description: string;
  time: string;
}

Features

Category Filtering: Filter notifications by updates, alerts, and reminders
Filter Buttons: Easy-to-use filter buttons for each category
Icon Support: Each notification displays an appropriate icon
All Filter: View all notifications regardless of category
Visual Feedback: Active filter button is highlighted
Empty States: Shows message when no notifications match filter

Usage

import NotificationsFilter, {
  NotificationItem,
} from "@/components/ui/notifications-filter";
import { Info, AlertCircle, Calendar } from "lucide-react";
 
export default function Example() {
  const notifications: NotificationItem[] = [
    {
      id: "1",
      category: "updates",
      icon: <Info className="h-4 w-4 text-blue-500" />,
      title: "System Update",
      description: "A new feature has been deployed.",
      time: "just now",
    },
    {
      id: "2",
      category: "alerts",
      icon: <AlertCircle className="h-4 w-4 text-red-500" />,
      title: "Security Alert",
      description: "Suspicious login detected.",
      time: "1h ago",
    },
    {
      id: "3",
      category: "reminders",
      icon: <Calendar className="h-4 w-4 text-green-500" />,
      title: "Meeting Reminder",
      description: "Project sync at 3 PM.",
      time: "2h ago",
    },
  ];
 
  return (
    <div className="p-6">
      {/* Default filtered notifications */}
      <NotificationsFilter />
 
      {/* Custom notifications */}
      <NotificationsFilter items={notifications} placement="top" />
    </div>
  );
}