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-100">Slipmat Template</h2>
|
|
<p class="mt-1 text-sm text-slate-400">
|
|
Pick the vinyl size and print spec that matches this order.
|
|
</p>
|
|
<div class="mt-4 grid gap-3 md:grid-cols-2">
|
|
<button
|
|
v-for="template in props.templates"
|
|
:key="template.id"
|
|
type="button"
|
|
class="group rounded-xl border border-slate-700/70 bg-slate-900/60 p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400"
|
|
:class="{
|
|
'border-sky-400/80 bg-sky-500/10 shadow-lg shadow-sky-500/20':
|
|
template.id === props.selectedTemplateId,
|
|
}"
|
|
@click="handleSelect(template.id)"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-base font-medium text-slate-100">
|
|
{{ template.name }}
|
|
</span>
|
|
<span
|
|
v-if="template.id === props.selectedTemplateId"
|
|
class="rounded-full bg-sky-500/20 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-sky-200"
|
|
>
|
|
Active
|
|
</span>
|
|
</div>
|
|
<dl class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2 text-xs text-slate-300">
|
|
<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>
|