mrhid6andClaude Opus 5
242a587340
State reads three ways on every card -- a stripe, a shaped-and-labelled pill, and the copy -- so it survives a colourblind reader and a glance at arm's length. Colour alone would fail on the one screen where getting it wrong costs money. The expired card leads with what still works, because that is the first thing a worried customer wants to know and the backend really does keep servers, monitors and agent keys running. The awaiting-link card is deliberately loud: a customer who has paid and not linked has paid for nothing yet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import clsx from "clsx";
|
|
import type { LicenceState } from "@/lib/format";
|
|
|
|
const LABEL: Record<LicenceState, string> = {
|
|
valid: "Valid",
|
|
warn: "Expiring",
|
|
expired: "Expired",
|
|
none: "Awaiting link",
|
|
};
|
|
|
|
/*
|
|
* State reads three ways: this pill's colour, the pill's SHAPE, and the label.
|
|
* Colour alone would fail a colourblind reader on the one screen where getting
|
|
* it wrong costs money.
|
|
*/
|
|
const SHAPE: Record<LicenceState, string> = {
|
|
valid: "rounded-full",
|
|
warn: "[clip-path:polygon(50%_0,100%_100%,0_100%)]",
|
|
expired: "[clip-path:polygon(20%_0,80%_0,100%_20%,100%_80%,80%_100%,20%_100%,0_80%,0_20%)]",
|
|
none: "rounded-none",
|
|
};
|
|
|
|
const TONE: Record<LicenceState, string> = {
|
|
valid: "border-valid text-valid",
|
|
warn: "border-warn text-warn",
|
|
expired: "border-expired text-expired",
|
|
none: "border-accent text-accent",
|
|
};
|
|
|
|
export function StatePill({ state }: { state: LicenceState }) {
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
"inline-flex shrink-0 items-center gap-1.5 rounded-sm border bg-panel px-2 py-0.5 font-mono text-[0.72rem] uppercase tracking-[0.08em]",
|
|
TONE[state],
|
|
)}
|
|
>
|
|
<i className={clsx("h-1.5 w-1.5 shrink-0 bg-current", SHAPE[state])} />
|
|
{LABEL[state]}
|
|
</span>
|
|
);
|
|
}
|