#131
Controlled
A NotificationBell whose notifications live in state and are updated by its read, read-all and clear callbacks.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Controlled" pattern (@codeatlasdev/ui demo #131, display/notification-bell) in my app.
Call get_demo({ ids: ["#131"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: An app header bell where the app owns the notification list and persists read and cleared state itself.
Keep these library parts, with the props and tokens the demo uses:
- NotificationBell from "@codeatlasdev/ui"
Behaviour to keep:
- `let items = $state([` holds 3 notifications with `id`, `title`, `body`, `time` and `read`
- Two items set `variant: 'success' as const` and `variant: 'warning' as const`, the New comment item sets none
- `notifications={items}` passes the list to `NotificationBell`
- `onRead={(id) =>` marks the matching item `read: true`
- `onReadAll={() =>` marks every item as read
- `onClear={() => (items = [])}` empties the list
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- NotificationBell
@codeatlasdev/ui
How it is built
- `let items = $state([` holds 3 notifications with `id`, `title`, `body`, `time` and `read`
- Two items set `variant: 'success' as const` and `variant: 'warning' as const`, the New comment item sets none
- `notifications={items}` passes the list to `NotificationBell`
- `onRead={(id) =>` marks the matching item `read: true`
- `onReadAll={() =>` marks every item as read
- `onClear={() => (items = [])}` empties the list
Related
Loading source.