Store base

src/components/store/PricingTable.astro

@@ -0,0 +1,71 @@
+---
+/**
+ * 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>