Notification Center

export interface Notification {
  id: string
  title: string
  message: string
  isRead: boolean
  createdAt: string
  priority?: 'low' | 'medium' | 'high'
}

export interface NotificationCenterProps {
  className?: string
  variant?: 'full' | 'popover'
  notifications?: Notification[]
  fetchNotifications?: () => Promise<Notification[]>
  onMarkAsRead?: (id: string) => Promise<void>
  onMarkAllAsRead?: () => Promise<void>
  onDeleteNotification?: (id: string) => Promise<void>
  onNotificationClick?: (notification: Notification) => void
  showFilter?: boolean
  showMarkAllRead?: boolean
  enableRealTimeUpdates?: boolean
  updateInterval?: number
  enableBrowserNotifications?: boolean
  emptyState?: {
    title?: string
    description?: string
  }
}

import { NotificationCenter } from "@/components/notification-center";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NotificationCenter
        variant="popover"
        fetchNotifications={fetchNotifications}
        onMarkAsRead={markAsRead}
        onMarkAllAsRead={markAllAsRead}
        onDeleteNotification={deleteNotification}
        enableRealTimeUpdates={true}
      />
    </QueryClientProvider>
  );
}

import { NotificationCenter } from "@/components/notification-center";
import type { Notification } from "@/components/notification-center";

// The component automatically applies these colors based on priority:
// - high: red (destructive variant)
// - medium: default
// - low: secondary

const notifications: Notification[] = [
  {
    id: '1',
    title: 'Critical Error',
    message: 'System failure detected',
    isRead: false,
    createdAt: new Date().toISOString(),
    priority: 'high' // Shows red badge
  },
  {
    id: '2',
    title: 'Update Available',
    message: 'New version ready to install',
    isRead: false,
    createdAt: new Date().toISOString(),
    priority: 'medium' // Shows default badge
  },
  {
    id: '3',
    title: 'Tip',
    message: 'Did you know you can customize settings?',
    isRead: false,
    createdAt: new Date().toISOString(),
    priority: 'low' // Shows secondary badge
  }
];

import { NotificationCenter } from "@/components/notification-center";
import { useMutation, useQueryClient } from "@tanstack/react-query";

export default function MyComponent() {
  const queryClient = useQueryClient();

  const markAsRead = async (id: string) => {
    // Optimistically update UI
    queryClient.setQueryData(['notifications'], (old: Notification[]) =>
      old.map(n => n.id === id ? { ...n, isRead: true } : n)
    );

    try {
      // Update backend
      await fetch(`/api/notifications/${id}/read`, { method: 'POST' });
    } catch (error) {
      // Revert on error
      queryClient.invalidateQueries({ queryKey: ['notifications'] });
    }
  };

  return (
    <NotificationCenter
      variant="popover"
      onMarkAsRead={markAsRead}
      enableRealTimeUpdates={true}
    />
  );
}

import { NotificationCenter } from "@/components/notification-center";
import { useQueryClient } from "@tanstack/react-query";
import { useEffect } from "react";

export default function MyComponent() {
  const queryClient = useQueryClient();

  useEffect(() => {
    const ws = new WebSocket('wss://api.example.com/notifications');

    ws.onmessage = (event) => {
      const newNotification = JSON.parse(event.data);
      
      queryClient.setQueryData(['notifications'], (old: Notification[] = []) => [
        newNotification,
        ...old
      ]);
    };

    return () => ws.close();
  }, [queryClient]);

  return (
    <NotificationCenter
      variant="popover"
      enableBrowserNotifications={true}
    />
  );
}