mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Claude
01431468e4
- Palette: Patiun Teal, Midnight, night sky, Starlight, flat Alchemist Gold; violet/indigo only as nebula light. Starlight content sections, night-sky nav and heroes (.on-sky scope re-points accent/gold to on-dark values). - Type: Cinzel for headings, names and card titles; Montserrat for body, UI and eyebrows (font-eyebrow); JetBrains Mono kept for code-like blocks. - Header lockup: Patiun glyph + Cinzel "GREG KILMER" + "Web Development · a Patiun LLC company"; glyph also marks the footer and store nav. - Teal filled buttons with Midnight text; gold eyebrows; small links use a darker teal so they pass WCAG AA on Starlight. - Favicons, app icons and web manifest from the GregKilmer.com brand package. - docs/THEMING.md updated for the new palette and fonts. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
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-semibold" style="color: var(--color-accent);">
|
|
{tier.price}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|