Komponen / Lapisan & umpan balik
Notification
Panel notifikasi ala Mail: titik biru untuk yang belum dibaca, filter Semua / Belum dibaca / Sebutan, dan "Tandai semua dibaca". Dibuka dari lonceng AppHeader.
Import
tsx
import { Notification, NotificationItem, formatRelativeTime } from '@divistant/circca-react';Props · Notification
Juga menerima atribut <section>. Notification.Item = NotificationItem. Penyaringan item (filter) dilakukan pemanggil.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | 'Notifikasi' | Judul panel (Headline/Default); menjadi nama aksesibel <section>. |
| titleAs | 'h2' | 'h3' | 'h4' | 'p' | 'h2' | Elemen judul sesuai hierarki heading. |
| unreadCount | number | — | Jumlah belum dibaca. Perubahannya diumumkan lewat aria-live polite; 0 menyembunyikan "Tandai semua dibaca". |
| onMarkAllRead | () => void | — | Menampilkan Button Ghost Small "Tandai semua dibaca" di header. |
| markAllReadLabel | string | 'Tandai semua dibaca' | Label tombol tandai semua. |
| filters | { value: string; label: string; count?: number }[] | — | Segmen filter (SegmentedControl Medium). `count` tampil sebagai Footnote fg/muted di belakang label. |
| filter / defaultFilter / onFilterChange | string / string / (value: string) => void | — | Filter aktif (terkendali/tak terkendali). Bawaan filter pertama. |
| footer | ReactNode | — | Isi footer rata tengah bergaris atas, mis. Button Ghost Small "Lihat semua notifikasi". |
| empty | ReactNode | — | Pengganti saat tidak ada item. Bawaan EmptyState Compact "Tidak ada notifikasi". |
| now | Date | — | Waktu acuan waktu relatif untuk semua item. Isi agar render server sama dengan klien. |
| bare | boolean | false | Tanpa latar, garis, radius, dan bayangan — untuk dipasang di Popover. |
| className | string | — | Kelas tambahan, mis. `w-full` di dalam Popover. |
Props · Notification.Item
Dirender sebagai <li> berisi <a> (bila ada href) atau <button> selebar baris.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactNode | — | Kalimat notifikasi: aktor + aksi + objek ("Anisa Nugraha menyetujui PO-2026-0142."). |
| actor | string | — | Nama aktor — inisial Avatar Circle 32. |
| avatarSrc | string | — | Foto aktor. |
| icon | Visual | — | Ikon pengganti avatar untuk notifikasi sistem (Receipt, CalendarX…). |
| reference | ReactNode | — | Nomor dokumen di awal meta: "PO-2026-0142 · 5 menit lalu". |
| time | Date | string | number | — | Waktu kejadian, ditulis relatif: "baru saja", "5 menit lalu", "1 jam lalu", "kemarin", "3 Okt". |
| timeLabel | ReactNode | — | Teks waktu kustom, menggantikan format relatif. |
| unread | boolean | false | Belum dibaca: teks fg/default + titik biru 8 dan teks sr-only "Belum dibaca". |
| href / target / rel | string | — | Baris menjadi tautan ke dokumen. |
| onClick | (event) => void | — | Mis. menandai dibaca lalu membuka dokumen. |
| now | Date | — | Waktu acuan; bawaan dari `now` di Notification. |
Sumber
Kode komponen ada di packages/react/src/components/notification. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.