NotificationCenter
Ilmoituskeskus
Kello, lukumerkki ja ilmoitusten lista ponnahdusikkunassa.
Käyttöpaikat
Suoraan: palvelu tuo osan itse. Välillisesti: osa tulee mukaan toisen paketin osan kautta, ja sen muutos näkyy palvelussa silti. Laskettu julkaisun yhteydessä 23.10.2026.
Käyttö
Paketin README:n luku sellaisenaan.
NotificationCenter — ilmoituskeskus
<NotificationCenter
notifications={ilmoitukset}
kinds={{
failed: { tone: "error", icon: ServerCrash },
stale: { tone: "warning", icon: Clock },
}}
LinkComponent={NextLink}
onMarkRead={(id) => merkitseLuetuksi(id)}
onMarkAllRead={() => merkitseKaikkiLuetuiksi()}
footer={<Link href="/halytykset">Katso kaikki →</Link>}
/>Paketti omistaa kellon, lukumerkin ja listan rakenteen; palvelu omistaa ilmoitukset, sanaston, linkit ja lukutilan säilytyksen. Sama raja kuin createStatusBadgeissa: kinds mappaa palvelun tapahtumalajit sävyihin ja ikoneihin, eikä paketti tunne niitä.
> ⚠️ `onMarkRead` ja `onMarkAllRead` ovat valinnaisia, mutta ilman niitä > lukumerkintää ei näytetä lainkaan. Nappi joka unohtaa on huonompi kuin ei > nappia. Jos lukutilaa ei voi säilyttää, komponentti tekee puutteesta > näkyvän sen sijaan että lupaisi jotain mitä se ei tee.
> `unread` tarkoittaa "tämä käyttäjä ei ole nähnyt tätä" — ei "tämä on > tärkeä". Jos palvelu ei pysty seuraamaan sitä käyttäjäkohtaisesti, jätä > kenttä pois: pysyvä merkki kellossa on kohinaa jota käyttäjä ei voi > poistaa. Vakavuus kuuluu kindiin.
Laskenta on erikseen: unreadBadge (katkaisu 9+:aan), unreadCount (puuttuva unread = luettu) ja sortNotifications (uusimmat ensin, aikaleimattomat loppuun, vakaa järjestys).
Tuonti ja lähde
import { NotificationCenter } from "@karkkainen/ui";src/components/notification-center.tsx