#132
Default
Two NotificationBell triggers side by side: one given three notifications and one given an empty list.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Default" pattern (@codeatlasdev/ui demo #132, display/notification-bell) in my app.
Call get_demo({ ids: ["#132"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Comparing the populated and empty bell states for an app header or toolbar.
Keep these library parts, with the props and tokens the demo uses:
- NotificationBell, Flex from "@codeatlasdev/ui"
Behaviour to keep:
- `<Flex gap="6" align="center">` wraps both bells
- `<NotificationBell notifications={items} />` with 3 const items (`id`, `title`, `body`, `time`, `read`), two with `read: false` and one with `read: true`
- `<NotificationBell notifications={[]} />` passes an empty list
- No callback props are passed to either bell
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 - Flex
@codeatlasdev/ui
How it is built
- `<Flex gap="6" align="center">` wraps both bells
- `<NotificationBell notifications={items} />` with 3 const items (`id`, `title`, `body`, `time`, `read`), two with `read: false` and one with `read: true`
- `<NotificationBell notifications={[]} />` passes an empty list
- No callback props are passed to either bell
Related
Loading source.