PageHeader — sivun otsikkokortti

PageHeader renderöi otsikon + subtitle:n + valinnaisen actions-slotin oikeaan reunaan, ja alareunaan bordertäytteisen erottimen (HR). Käytä sitä jokaisen sisältösivun ylhäällä yhdenmukaisen ilmeen saavuttamiseksi.

import { PageHeader, Button } from "@karkkainen/ui";
import { Plus } from "lucide-react";

<PageHeader
  title="Toimittajat"
  subtitle={`${suppliers.length} toimittajaa konfiguroituna`}
  actions={
    <Button className="gap-2" onClick={onAdd}>
      <Plus className="size-4" />
      Lisää toimittaja
    </Button>
  }
/>

Konventiot:

• `title`: sivun nimi lyhyesti (yksi tai kaksi sanaa). Vastaa yleensä navigaation labelia.
• `subtitle`: yksi virke joka kertoo *mitä sivulla näkyy nyt* tai *mihin sivu on tarkoitettu*. Voi olla dynaaminen (esim. rivilaskuri ${count} toimittajaa) tai staattinen. Ei markdownia, ei linkkejä.
• `actions`: sivun primary action (esim. "Lisää X", "Vie X"). Yleensä yksi painike, harvoin kaksi. Kolme+ = suunnittele uusiksi. Ks. "Painikkeen sijoitus" alempana miten valita sijoitus.

variant="statement" — lause joka kertoo tilanteen

Kun sivun otsikko on luku jonka takia sivu on olemassa, se on sisältöä eikä nimilappu: «17 linjasta 10 tuo dataa ajallaan. 5 vaatii korjausta.» Silloin otsikko on isompi ja tasapainotettu (text-balance), viivaa ei ole, ja toiminnot ovat omalla rivillään alla.

<PageHeader
  variant="statement"
  eyebrow="20.10. klo 09.00"
  title={<>Tekoäly perusti yöllä 412 tuotetta. <span className="text-success">371</span> on valmiita.</>}
  lead="Poikkeukset on ohjattu sille, joka niistä päättää, ja vanha arvo on voimassa siihen asti."
  actions={<Button>Aloita päätökset (11)</Button>}
/>

• `eyebrow`: pieni rivi otsikon yllä — päivämäärä, ajon aika, toimittajan tunnus. Vastaa kysymykseen *mistä hetkestä tämä kertoo*.
• `lead`: johdantokappale kokonaisin virkkein. Toisin kuin subtitle, saa olla kahden rivin mittainen: se selittää luvun, jonka otsikko väittää.
• `title` ottaa `ReactNode`n, jotta luvun voi värittää tilavärillä. Se on ainoa paikka jossa tilaväri on tekstinä: iso koko pitää kontrastin.

Molemmat propsit toimivat myös oletusmuodossa.