Notification panel
A list of notifications with unread markers and mark-as-read actions.
Notifications
2 unread- Deploy succeededgamma-site is live on the edge2m
- New commentMaya replied on Progress stack1h
- Weekly digest12 components viewed this week1d
Implementation
1"use client";2 3import {} from "react";4import type { HTMLAttributes, ReactNode } from "react";5import { ViewTransitionSafe } from "./ViewTransitionSafe";6import { runViewTransition } from "@/lib/view-transition";7 8export type NotificationPanelItem = {9 id: string;10 /** Notification title. */11 title: string;12 /** Supporting line under the title. */13 body?: string;14 /** Small trailing time or status text. */15 time?: string;16 /** Leading visual slot, for example an avatar or glyph. */17 icon?: ReactNode;18 /** Unread items show the marker and a mark-read action. */19 unread?: boolean;20};21 22export type NotificationPanelProps = Omit<23 HTMLAttributes<HTMLElement>,24 "children" | "onChange"25> & {26 /** Notifications to list, newest first. */27 items: NotificationPanelItem[];28 /** Panel heading. */