Esittelykortti

SpotlightFrame — esittelykortti

Yksinkertainen kortti (palvelun omistaja 23.10.2026): otsikollinen kehys ja reunasta reunaan ulottuva paneeli pisteruudukolla, keskellä ikoni kahden vinon kortin päällä, otsikko ja selitys. Paneeli on FrameBody, joten kehyksen leikkaus ja yläreunan korostus tulevat mukana. Kortti sijoitetaan sivun omalle pohjalle, ei toisen kehyksen sisään.

import { History } from "lucide-react";
import { SpotlightFrame } from "@karkkainen/ui";

<SpotlightFrame
  title="Kortin otsikko"
  icon={History}
  heading="Terveisiä kortista!"
  description="Tämä on kortti TP-PERUSTUS agentille"
  action={<Button size="sm">Aloita</Button>}  // valinnainen
/>

Ilman titlea kortissa ei ole otsikkoriviä: paneeli täyttää koko kortin, ja yläreunan korostus siirtyy kortin yläreunaan.

<SpotlightFrame icon={Mail} heading="Tämä on otsikko" description="Tämä on kappale otsikon alla"
  action={<Button variant="outline" size="sm">Painike</Button>} />

• Pisteet 20 px:n välein reunaviivan sävyllä (--frame-border), paneelin vähimmäiskorkeus 176 px.
• Ikoni 18 px 40 px:n laatassa; selitys enintään 52 merkkiä leveä.
• Ei tyhjä tila: tyhjälle tulokselle käytä EmptyStatea (role="status"). Tämä on esittely- tai ohjekortti eikä väitä mitään tuloksesta.

`SpotlightCard` on sama sisältö korkeana korttina ruudukon sarakkeeseen (omistaja 23.10.2026: kolmannes leveydestä): valkoinen, ilman pisteruudukkoa, otsikko ja apurivi vasemmassa yläkulmassa, keskellä suurempi otsikko (20 px). Vähimmäiskorkeus 512 px.

<div className="grid gap-6 md:grid-cols-3">
  <SpotlightCard
    title="Haluatko antaa meille otsikon?"
    subtitle="Klikkaa tästä ja valitse kappale"
    icon={UserX}
    heading="Unohditko otsikkosi?"
    description="Palauta se tämän kappaleen alta."
    action={<Button>Palauta otsikko</Button>}
  />
  {/* Viereen kaksi kolmannesta: sama kortti vapaalla sisällöllä, esim. taulukko. */}
  <PanelCard className="md:col-span-2" title="Toimittajien tilanne" subtitle="Luettelot ja luokittelu"
    actions={<Button variant="outline" size="sm">Avaa</Button>}>
    {/* Rivit reunasta reunaan: kumoa kortin täyte ja anna reunasarakkeille sama täyte. */}
    <div className="-mx-4 -mb-4 mt-4 flex-1">
      <Table className="[&_tr>*:first-child]:ps-4 [&_tr>*:last-child]:pe-4 [&_tbody_tr:last-child]:border-b-0">…</Table>
    </div>
  </PanelCard>
</div>