3d:T5003,
// Three cards, each wearing its kind's hue by the flare rule: glass stained by it, its
// rim catching it; plain the page's card, the hue only in its marks. The same cards on
// the page and over a photograph. Under the pointer a card catches more light, and
// nothing moves.
type Ticket = {
  id: string
  kind: "feat" | "fix" | "chore"
  number: string
  title: string
  body: string
  author: string
  face?: string
  votes: number
  comments: number
}

const HUE: Record<Ticket["kind"], string> = {
  feat: "oklch(68% 0.13 250)",
  fix: "oklch(64% 0.19 27)",
  chore: "oklch(72% 0.14 155)",
}

const TICKETS: Ticket[] = [
  {
    id: "t21",
    kind: "feat",
    number: "#21",
    title: "offline downloads",
    body: "Keep a season on the phone for a flight: picked per episode, deleted once watched.",
    author: "Adrian Galilea",
    face: "/adriangalilea.jpg",
    votes: 12,
    comments: 4,
  },
  {
    id: "t34",
    kind: "fix",
    number: "#34",
    title: "subtitles drift after a seek",
    body: "Seeking back thirty seconds leaves the captions a beat late until the next cue.",
    author: "Walter Cronkite",
    face: "/people/cronkite.jpg",
    votes: 7,
    comments: 2,
  },
  {
    id: "t40",
    kind: "chore",
    number: "#40",
    title: "move the build to the new runner",
    body: "The old one is retired at the end of the month.",
    author: "Ada Lovelace",
    votes: 3,
    comments: 0,
  },
]

/** A ticket's parts, as every card writes them: its kind, its title, its foot. */
function TicketFace({
  ticket,
  voted,
  onVote,
}: {
  ticket: Ticket
  voted: boolean
  onVote: () => void
}) {
  return (
    <>
      <CardKind number={ticket.number}>{ticket.kind}</CardKind>
      <CardTitle className="font-semibold">{ticket.title}</CardTitle>
      <CardFooter>
        <CardAuthor name={ticket.author} src={ticket.face} />
        <span className="flex items-center gap-1">
          <CardCount
            icon={MessageCircle}
            count={ticket.comments}
            said="comments"
          />
          <CardCount
            icon={ArrowUp}
            count={ticket.votes + (voted ? 1 : 0)}
            on={voted}
            said="votes"
            onClick={onVote}
          />
        </span>
      </CardFooter>
    </>
  )
}

function Tickets({ material }: { material: Material }) {
  const [voted, setVoted] = React.useState<ReadonlySet<string>>(new Set())
  const vote = (id: string) =>
    setVoted((v) => {
      const next = new Set(v)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      {TICKETS.map((t) => (
        <Card
          key={t.id}
          hue={HUE[t.kind]}
          material={material}
          padding="regular"
          interactive
        >
          <TicketFace
            ticket={t}
            voted={voted.has(t.id)}
            onVote={() => vote(t.id)}
          />
        </Card>
      ))}
    </div>
  )
}

<Tickets material="plain" />
3c:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$3d"}}]