first commit

app/components/designer/TemplatePicker.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { SlipmatTemplate } from "~/composables/useSlipmatDesigner";
+
+const props = defineProps<{
+  templates: SlipmatTemplate[];
+  selectedTemplateId: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "select", templateId: string): void;
+}>();
+
+const handleSelect = (templateId: string) => {
+  emit("select", templateId);
+};
+</script>
+
+<template>
+  <section>
+    <h2 class="text-lg font-semibold text-slate-900">Jersey Template</h2>
+    <p class="mt-1 text-sm text-slate-600">
+      Pick the size and print spec that matches this order.
+    </p>
+    <div class="mt-4 grid gap-3 md:grid-cols-1">
+      <button
+        v-for="template in props.templates"
+        :key="template.id"
+        type="button"
+        class="group rounded-xl border border-slate-200 bg-white p-4 text-left shadow-sm transition focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-900"
+        :class="{
+          'border-slate-900 bg-slate-50 shadow-md':
+            template.id === props.selectedTemplateId,
+        }"
+        @click="handleSelect(template.id)"
+      >
+        <div class="flex items-center justify-between">
+          <span class="text-base font-medium text-slate-900">
+            {{ template.name }}
+          </span>
+          <span
+            v-if="template.id === props.selectedTemplateId"
+            class="rounded-full bg-slate-900 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-white"
+          >
+            Active
+          </span>
+        </div>
+        <dl class="mt-3 grid grid-cols-4 gap-x-3 gap-y-2 text-xs text-slate-700">
+          <div>
+            <dt class="text-slate-500">Diameter</dt>
+            <dd>{{ template.diameterInches }}&quot;</dd>
+          </div>
+          <div>
+            <dt class="text-slate-500">Resolution</dt>
+            <dd>{{ template.dpi }} DPI</dd>
+          </div>
+          <div>
+            <dt class="text-slate-500">Bleed</dt>
+            <dd>{{ template.bleedInches ?? 0 }}&quot;</dd>
+          </div>
+          <div>
+            <dt class="text-slate-500">Safe Zone</dt>
+            <dd>{{ template.safeZoneInches ?? 0 }}&quot;</dd>
+          </div>
+        </dl>
+      </button>
+    </div>
+  </section>
+</template>