Notification

import * as React from 'react';
import { Button, Icon, Notification, NotificationCenter, Popover, PopoverContent, PopoverTrigger } from '@bindshq/stance-react';
import type { IconName } from '@bindshq/stance-react';

interface Item {
  id: number;
  title: string;
  description?: string;
  minutes: number;
  unread: boolean;
  icon: IconName;
}

const initial: Item[] = [
  {
    id: 1,
    title: 'Ada Lovelace approved “Sales, EMEA”',
    description: 'It will deploy on the next sync.',
    minutes: 4,
    unread: true,
    icon: 'check-circle',
  },
  {
    id: 2,
    title: '12 new users synced from Azure AD',
    description: 'They received the default signature.',
    minutes: 95,
    unread: true,
    icon: 'users',
  },
  {
    id: 3,
    title: 'Exchange relay certificate renewed',
    minutes: 60 * 26,
    unread: false,
    icon: 'shield',
  },
];

function useItems() {
  const [items, setItems] = React.useState(initial.map((n) => ({ ...n })));
  const markRead = (id: number) =>
    setItems((all) => all.map((n) => (n.id === id ? { ...n, unread: false } : n)));
  const markAll = () => setItems((all) => all.map((n) => ({ ...n, unread: false })));
  return { items, markRead, markAll, unread: items.filter((n) => n.unread).length };
}

export function BellPopover() {
  const { items, markRead, markAll, unread } = useItems();
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          aria-label={`Notifications, ${unread} unread`}
          leadingIcon={<Icon name="bell" />}
        >
          {unread}
        </Button>
      </PopoverTrigger>
      <PopoverContent aria-label="Notifications" align="end" style={{ padding: 0, width: 380 }}>
        <NotificationCenter
          unreadCount={unread}
          onMarkAllRead={markAll}
          footer={<a href="#all">View all notifications</a>}
        >
          {items.map((n) => (
            <Notification
              key={n.id}
              title={n.title}
              description={n.description}
              time={new Date(Date.now() - n.minutes * 60_000)}
              unread={n.unread}
              onMarkRead={() => markRead(n.id)}
              media={<Icon name={n.icon} size={20} />}
            />
          ))}
        </NotificationCenter>
      </PopoverContent>
    </Popover>
  );
}

import { Button, Icon, Notification, NotificationList } from '@bindshq/stance-react';

export function List() {
  return (
    <NotificationList label="Recent activity" style={{ maxWidth: 480 }}>
      <Notification
        unread
        title="Grace Hopper requested access to “Brand 2026”"
        time="2 minutes ago"
        media={<Icon name="user" size={20} />}
        actions={
          <>
            <Button size="xs">Approve</Button>
            <Button size="xs" variant="outline">
              Decline
            </Button>
          </>
        }
      />
      <Notification
        title="Weekly deployment report is ready"
        href="#report"
        time="Yesterday"
        media={<Icon name="file-text" size={20} />}
      />
    </NotificationList>
  );
}

import { NotificationCenter } from '@bindshq/stance-react';

export function Empty() {
  return (
    <div
      style={{ width: 360, border: '1px solid var(--st-color-border-default)', borderRadius: 12 }}
    >
      <NotificationCenter />
    </div>
  );
}