Notification

import { NotificationDropdown } from '@versaui/ui/components/Notification';

const notifications = [
  {
    id: '1',
    title: 'Meeting rescheduled',
    description: 'Design sync has been moved to 3:30 PM.',
    timestamp: '10m ago',
    unread: true,
    leadingItem: 'icon',
    iconState: 'warning',
  },
  {
    id: '2',
    title: 'Sarah commented on your design',
    description: '"The new glassmorphism modal looks clean!"',
    timestamp: '1h ago',
    unread: true,
    leadingItem: 'avatar',
  },
];

export function Example() {
  return (
    <NotificationDropdown
      size="default"
      notifications={notifications}
      onNotificationClick={(id) => console.log('Clicked notification:', id)}
      onMarkAllAsRead={() => console.log('Mark all read')}
      onViewAll={() => console.log('View all notifications')}
    />
  );
}

import { NotificationItem } from '@versaui/ui/components/Notification';
import { CalendarBlank } from '@phosphor-icons/react';

export function Example() {
  return (
    <NotificationItem
      size="default"
      leadingItem="icon"
      icon={<CalendarBlank weight="duotone" />}
      iconState="warning"
      title="Sprint Review scheduled"
      description="Join the team sprint review meeting at 4:00 PM."
      timestamp="15m ago"
      unread
      onClick={() => console.log('Notification clicked')}
    />
  );
}

import { useState } from 'react';
import { NotificationIcon, NotificationDropdown } from '@versaui/ui/components/Notification';

export function HeaderNotification() {
  const [isOpen, setIsOpen] = useState(false);
  const [hasUnread, setHasUnread] = useState(true);

  return (
    <div className="relative">
      <NotificationIcon
        selected={isOpen}
        notificationDot={hasUnread}
        onClick={() => setIsOpen(!isOpen)}
      />
      {isOpen && (
        <div className="absolute right-0 top-10 z-50">
          <NotificationDropdown
            notifications={[/* ... */]}
            onMarkAllAsRead={() => setHasUnread(false)}
          />
        </div>
      )}
    </div>
  );
}