mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
72 lines
2.4 KiB
Plaintext
72 lines
2.4 KiB
Plaintext
---
|
|
/**
|
|
* PricingTable.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Generic quantity/pricing table. Takes a caption + a list of tiers
|
|
* ({ band, price, note? }) and renders a clean three-column table. Used for
|
|
* both the card-set tiers and the deck-box print tiers.
|
|
*/
|
|
import Icon from '@components/Icon.astro';
|
|
|
|
interface Tier {
|
|
band: string;
|
|
price: string;
|
|
note?: string;
|
|
}
|
|
|
|
interface Props {
|
|
/** mdi icon shown beside the caption. */
|
|
icon?: string;
|
|
caption: string;
|
|
tiers: Tier[];
|
|
/** Column header for the price column, e.g. "Price". */
|
|
priceHeader?: string;
|
|
/** Optional supporting line under the caption. */
|
|
subtitle?: string;
|
|
}
|
|
|
|
const { icon, caption, tiers, priceHeader = 'Price', subtitle } = Astro.props;
|
|
---
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-1">
|
|
<span class="inline-flex items-center gap-2 font-sans text-lg font-bold" style="color: var(--color-text);">
|
|
{icon && <Icon name={icon} class="h-5 w-5" style="color: var(--color-accent);" />}
|
|
{caption}
|
|
</span>
|
|
{subtitle && (
|
|
<span class="text-sm" style="color: var(--color-text-muted);">{subtitle}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div class="overflow-hidden rounded-xl border" style="border-color: var(--color-border);">
|
|
<table class="w-full border-collapse text-left text-sm">
|
|
<thead>
|
|
<tr style="background: var(--color-surface-sunken);">
|
|
<th scope="col" class="px-4 py-3 font-sans text-xs font-semibold uppercase tracking-wider" style="color: var(--color-text-subtle);">
|
|
Quantity
|
|
</th>
|
|
<th scope="col" class="px-4 py-3 text-right font-sans text-xs font-semibold uppercase tracking-wider" style="color: var(--color-text-subtle);">
|
|
{priceHeader}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{tiers.map((tier, i) => (
|
|
<tr style={i > 0 ? 'border-top: 1px solid var(--color-border);' : undefined}>
|
|
<td class="px-4 py-3" style="color: var(--color-text);">
|
|
<span class="font-medium">{tier.band}</span>
|
|
{tier.note && (
|
|
<span class="ml-2 text-xs" style="color: var(--color-text-subtle);">({tier.note})</span>
|
|
)}
|
|
</td>
|
|
<td class="px-4 py-3 text-right font-mono font-semibold" style="color: var(--color-accent);">
|
|
{tier.price}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|