tbenandClaude Opus 5.5
3a9e57f682
- Both tables lay their heading and rows on one shared grid, so every figure sits under its own heading (twui's Row wrapped the cells). - The selected range reads as pressed: ink-filled in a hairline track. - Each day's bar opens a small summary card on hover or tap. - twui 0.1.7 places popovers before paint, so opening one no longer makes the layout flicker. Co-Authored-By: Claude Opus 5.5 <[email protected]>
21 lines
616 B
TypeScript
21 lines
616 B
TypeScript
import Row from "@moduletrace/twui/layout/Row";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
|
|
type Props = {
|
|
label: string;
|
|
value: string;
|
|
};
|
|
|
|
/**
|
|
* One figure of a day's summary card: what it is on the left, the figure
|
|
* on the right.
|
|
*/
|
|
export default function UsageSummaryLine({ label, value }: Props) {
|
|
return (
|
|
<Row className="w-full gap-3! flex-nowrap items-center justify-between">
|
|
<Span className="text-[12px] leading-4 text-ink-secondary">{label}</Span>
|
|
<Span className="text-[12px] leading-4 text-ink tabular-nums">{value}</Span>
|
|
</Row>
|
|
);
|
|
}
|