Store base

src/components/store/RequirementList.astro

@@ -0,0 +1,57 @@
+---
+/**
+ * RequirementList.astro
+ * ---------------------------------------------------------------------------
+ * Renders the store rules / requirements. Each item has an mdi icon that
+ * signals tone: 'check-decagram' / 'information' = neutral rule,
+ * 'alert' = caution, 'close-circle' = hard no / final.
+ *
+ * Used on the storefront and repeated on the order page; the OrderForm also
+ * requires an explicit acknowledgment of these.
+ */
+import Icon from '@components/Icon.astro';
+import type { Requirement } from '@data/store-products';
+
+interface Props {
+  items: Requirement[];
+  /** Optional heading shown above the list. */
+  heading?: string;
+}
+
+const { items, heading } = Astro.props;
+
+// Map the requirement icon to a tone color.
+function toneColor(icon: Requirement['icon']): string {
+  switch (icon) {
+    case 'alert':
+      return '#e8b54a'; // amber — caution
+    case 'close-circle':
+      return '#e5655a'; // red — hard no
+    case 'check-decagram':
+    case 'information':
+    default:
+      return 'var(--color-accent)';
+  }
+}
+---
+
+{heading && (
+  <h3 class="font-sans text-xl font-bold" style="color: var(--color-text);">{heading}</h3>
+)}
+
+<ul class="flex flex-col gap-3">
+  {items.map((item) => (
+    <li
+      class="flex gap-3 rounded-lg border p-4"
+      style="border-color: var(--color-border); background: var(--color-surface-raised);"
+    >
+      <span class="mt-0.5 shrink-0" style={`color: ${toneColor(item.icon)};`}>
+        <Icon name={item.icon} class="h-5 w-5" />
+      </span>
+      <div class="flex flex-col gap-0.5">
+        <span class="font-sans text-sm font-semibold" style="color: var(--color-text);">{item.title}</span>
+        <span class="text-sm leading-relaxed" style="color: var(--color-text-muted);">{item.body}</span>
+      </div>
+    </li>
+  ))}
+</ul>