NotificationCenter

NotificationCenter renders a bell icon-button with an unread count, a popover panel listing notifications, and a "Mark all read" action.

#Default usage

<NotificationCenter
  items={[
    { id: "1", title: "Build finished", body: "All checks passed.", timestamp: "2m ago" },
    { id: "2", title: "Reviewer assigned", read: true, timestamp: "yesterday" }
  ]}
/>

#Import

import { NotificationCenter, type NotificationItem } from "@froggdesign/enter-ui-react";

#Accessibility

The bell trigger announces the unread count via aria-label. Each item is a real <button> so keyboard users can activate them with Enter/Space. The panel inherits Popover focus trap and Escape-to-close.

#API

• items: notification list (id, title, optional body, timestamp, read).
• onItemClick(id): called when an item is clicked.
• onMarkAllRead: when set, surfaces the bulk action in the panel header.
• empty: optional empty-state copy override.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.