Header

let period: keyof typeof USAGE = "current";

function choosePeriod(event: Event) {
	period = (event.target as HTMLSelectElement).value as keyof typeof USAGE;
	void handle.update();
}

// A native select's change event bubbles, so the panel is where the island listens.
<div mix={[on<HTMLDivElement, "change">("change", choosePeriod)]}>
	<Label htmlFor="period">Billing period</Label>
	<Select id="period" name="period">
		<Select.Option value="current" selected={period === "current"}>This month</Select.Option>
		<Select.Option value="previous" selected={period === "previous"}>Last month</Select.Option>
	</Select>

	<Header>Metered usage</Header>
	{USAGE[period].metered.map((row) => (
		<div key={row.name} mix={[hstack({ gap: 4, align: "baseline", justify: "between" })]}>
			<span>{row.name}</span>
			<span>{row.value}</span>
		</div>
	))}

	<Separator />

	<Header>Plan limits</Header>
	{USAGE[period].limits.map((row) => (
		<div key={row.name} mix={[hstack({ gap: 4, align: "baseline", justify: "between" })]}>
			<span>{row.name}</span>
			<span>{row.value}</span>
		</div>
	))}
</div>