Store base

src/components/store/SlotMeter.astro

@@ -0,0 +1,66 @@
+---
+/**
+ * SlotMeter.astro
+ * ---------------------------------------------------------------------------
+ * Visual "X of Y slots open" capacity meter for a store category. Reads a slot
+ * status (open + total) and renders a progress-style bar plus an open/closed
+ * pill. The fill width reflects open/total; when open === 0 it shows CLOSED.
+ */
+import Icon from '@components/Icon.astro';
+
+interface Props {
+  /** Category label, e.g. "Card orders" or "3D-print slots". */
+  label: string;
+  /** mdi icon for the row. */
+  icon: string;
+  /** Number of currently open slots. */
+  open: number;
+  /** Total slots for the category. */
+  total: number;
+}
+
+const { label, icon, open, total } = Astro.props;
+const closed = open <= 0;
+const pct = total > 0 ? Math.max(0, Math.min(100, (open / total) * 100)) : 0;
+---
+
+<div
+  class="flex flex-col gap-3 rounded-xl border p-4"
+  style="border-color: var(--color-border); background: var(--color-surface-raised);"
+>
+  <div class="flex items-center justify-between gap-3">
+    <span class="inline-flex items-center gap-2 font-sans text-sm font-semibold" style="color: var(--color-text);">
+      <Icon name={icon} class="h-5 w-5" style="color: var(--color-accent);" />
+      {label}
+    </span>
+    <span
+      class="pill"
+      style={closed
+        ? 'background: color-mix(in srgb, #e55 15%, transparent); border-color: color-mix(in srgb, #e55 40%, transparent);'
+        : undefined}
+    >
+      {closed ? 'Closed' : 'Open'}
+    </span>
+  </div>
+
+  <div class="flex items-center justify-between text-sm" style="color: var(--color-text-muted);">
+    <span>{open} of {total} slots open</span>
+    <span class="font-mono text-xs" style="color: var(--color-text-subtle);">{closed ? '0%' : `${Math.round(pct)}%`}</span>
+  </div>
+
+  <div
+    class="h-2 w-full overflow-hidden rounded-full"
+    style="background: color-mix(in srgb, var(--color-border) 60%, transparent);"
+    role="meter"
+    aria-valuenow={open}
+    aria-valuemin="0"
+    aria-valuemax={total}
+    aria-label={`${label}: ${open} of ${total} slots open`}
+  >
+    <div
+      class="h-full rounded-full transition-[width] duration-500"
+      style={`width: ${pct}%; background: ${closed ? '#e55' : 'var(--color-accent)'};`}
+    >
+    </div>
+  </div>
+</div>