# UsageEstimate

> A usage-pricing calculator that needs no script: a GET form of the reader's numbers beside the bill the server printed for them.

```ts
import { UsageEstimate } from "@sdxc/ui/landing";
```

A GET form beside its bill on one card, side by side from 40rem, the sheet ruled in
`--ui-landing-hairline`; with no script a submit reloads the page on the new bill. For `live`,
map UsageEstimateLive (`@sdxc/ui/landing/usage-estimate`) to re-price while typing.

## Examples

```tsx
<UsageEstimate
	action="#pricing"
	fields={<TextField label="Hours a month" type="number" name="hours" defaultValue="40" />}
	submitLabel="Estimate"
	bill={
		<UsageEstimate.Bill
			label="Estimated monthly bill"
			rows={[{ label: "Recorded hours", detail: "35 h × $0.36", amount: "$12.60" }]}
			total={{ label: "Per month", amount: "$12.60" }}
		/>
	}
/>
```

```tsx
<UsageEstimate
	action="#pricing"
	fields={<TextField label="Hours a month" type="number" name="hours" defaultValue="40" />}
	submitLabel="Estimate"
	live={{ frame: "pricing-bill", src: "/?hours=40" }}
/>
```

## Props

Takes no props of its own.

### UsageEstimate.Bill

The bill a calculator shows: its lines and total in a column of tabular figures, then the footnote and the CTA at the sheet's foot.

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `string` | Accessible name of the bill's table, such as "Estimated monthly bill". |
| `rows` | `readonly Row[]` | The bill's lines, in the order they add up. |
| `total` | `Row` | The sum, set larger under a rule. |
| `footnote?` | `RemixNode` | A line under the total, such as what the price leaves out. |
| `cta?` | `RemixNode` | The page's next step under the bill, such as its primary CTA. |