69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<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 }}"</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 }}"</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-slate-500">Safe Zone</dt>
|
|
<dd>{{ template.safeZoneInches ?? 0 }}"</dd>
|
|
</div>
|
|
</dl>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</template>
|