"use client"; import * as React from "react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { BellIcon } from "@kineticui/icons"; export type AppNotification = { id: string; title: React.ReactNode; body?: React.ReactNode; time: string; read?: boolean; /** Avatar, icon or initials. */ icon?: React.ReactNode; /** Buttons such as Accept / Decline. */ actions?: React.ReactNode; category?: string; }; export type NotificationCenterProps = { notifications: AppNotification[]; onChange: (notifications: AppNotification[]) => void; onOpenSettings?: () => void; className?: string; }; /** Bell with unread badge that opens an inbox: All / Unread tabs, mark-all-read, dismiss. */ export function NotificationCenter({ notifications, onChange, onOpenSettings, className }: NotificationCenterProps) { const [tab, setTab] = React.useState<"all" | "unread">("all"); const unread = notifications.filter((n) => !n.read).length; const list = tab === "unread" ? notifications.filter((n) => !n.read) : notifications; const id = React.useId(); return ( {unread ? ( {unread > 9 ? "9+" : unread} ) : null}

{(["all", "unread"] as const).map((t) => ( ))}

{list.length ? ( list.map((n) => ( !n.read && onChange(notifications.map((x) => (x.id === n.id ? { ...x, read: true } : x)))} > {n.icon ? {n.icon} : null}

{n.title}

{n.body ?

{n.body}

: null}

{n.time} {n.category ? · {n.category} : null}

{n.actions ?

{n.actions}

: null}

{!n.read ? : null} )) ) : (

You're all caught up New notifications will show up here.

)}

{onOpenSettings ? ( ) : null} ); }

Notification Center

Installation

Exports