slipmatz-web/app/components/designer/DesignerPreview.vue

<script setup lang="ts">
const props = defineProps<{
  previewUrl: string | null;
  templateLabel: string;
  productionPixels: number;
  isExporting: boolean;
  isCheckoutPending: boolean;
  checkoutPrice: number;
  checkoutError: string | null;
}>();

const emit = defineEmits<{
  (e: "download-preview"): void;
  (e: "download-production"): void;
  (e: "export"): void;
  (e: "checkout"): void;
}>();

const viewMode = ref<"flat" | "turntable">("flat");

const isFlat = computed(() => viewMode.value === "flat");

const handleSelectView = (mode: "flat" | "turntable") => {
  viewMode.value = mode;
};

const handleExport = () => emit("export");
const handleDownloadPreview = () => emit("download-preview");
const handleDownloadProduction = () => emit("download-production");
const handleCheckout = () => emit("checkout");

const priceLabel = computed(() => props.checkoutPrice.toFixed(2));
</script>

<template>
  <section class="rounded-2xl border border-slate-800/60 bg-slate-900/80 p-4 shadow-lg shadow-slate-950/40">
    <header class="flex items-center justify-between">
      <div>
        <h3 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
          Output Preview
        </h3>
        <p class="mt-1 text-sm text-slate-300">
          {{ templateLabel }} • {{ productionPixels }}×{{ productionPixels }} px
        </p>
      </div>
      <button
        type="button"
        class="rounded-lg border border-sky-500/60 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:bg-sky-500/10 disabled:cursor-not-allowed disabled:border-slate-600 disabled:text-slate-500"
        :disabled="props.isExporting"
        @click="handleExport"
      >
        {{ props.isExporting ? "Exporting…" : "Generate Files" }}
      </button>
    </header>
    <div class="mt-4 flex gap-2">
      <button
        type="button"
        class="flex-1 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-wide transition"
        :class="isFlat ? 'border-sky-500 bg-sky-500/10 text-sky-200' : 'border-slate-800 bg-slate-900 text-slate-400 hover:border-slate-700/80 hover:text-slate-200'"
        @click="handleSelectView('flat')"
      >
        Flat View
      </button>
      <button
        type="button"
        class="flex-1 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-wide transition"
        :class="!isFlat ? 'border-sky-500 bg-sky-500/10 text-sky-200' : 'border-slate-800 bg-slate-900 text-slate-400 hover:border-slate-700/80 hover:text-slate-200'"
        @click="handleSelectView('turntable')"
      >
        Turntable View
      </button>
    </div>
    <div class="mt-4 aspect-square overflow-hidden rounded-2xl border border-slate-800 bg-slate-950">
      <template v-if="props.previewUrl">
        <div v-if="isFlat" class="h-full w-full">
          <img
            :src="props.previewUrl"
            alt="Slipmat preview flat"
            class="h-full w-full object-cover"
          />
        </div>
        <div v-else class="relative h-full w-full bg-linear-to-br from-slate-900 via-slate-950 to-black">
          <img
            src="/turntable-mockup.svg"
            alt="Turntable illustration"
            class="pointer-events-none h-full w-full object-contain"
          />
          <div class="absolute left-[16%] top-[18%] h-[64%] w-[48%] -rotate-2 overflow-hidden rounded-full shadow-xl shadow-black/40">
            <div class="absolute inset-0 bg-slate-900/40" />
            <img
              :src="props.previewUrl"
              alt="Slipmat preview turntable"
              class="h-full w-full object-cover opacity-95 mix-blend-screen"
            />
          </div>
        </div>
      </template>
      <div
        v-else
        class="flex h-full items-center justify-center text-sm text-slate-500"
      >
        No preview yet—start designing!
      </div>
    </div>
    <div class="mt-4 flex flex-wrap gap-3">
      <button
        type="button"
        class="flex-1 rounded-xl bg-slate-800 px-4 py-3 text-sm font-medium text-slate-100 transition hover:bg-slate-700 disabled:cursor-not-allowed disabled:bg-slate-800/70 disabled:text-slate-500"
        :disabled="!props.previewUrl"
        @click="handleDownloadPreview"
      >
        Download Web Preview
      </button>
      <button
        type="button"
        class="flex-1 rounded-xl bg-sky-600 px-4 py-3 text-sm font-medium text-white transition hover:bg-sky-500 disabled:cursor-not-allowed disabled:bg-slate-600/70"
        :disabled="props.isExporting"
        @click="handleDownloadProduction"
      >
        Download Print-Ready PNG
      </button>
      <button
        type="button"
        class="flex-1 rounded-xl bg-emerald-500 px-4 py-3 text-sm font-semibold text-emerald-950 transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:bg-emerald-500/60 disabled:text-emerald-900/60"
        :disabled="props.isCheckoutPending || props.isExporting"
        @click="handleCheckout"
      >
        {{ props.isCheckoutPending ? "Redirecting…" : `Buy This Design ($${priceLabel})` }}
      </button>
    </div>
    <div
      v-if="props.checkoutError"
      class="mt-3 rounded-xl border border-rose-500/60 bg-rose-500/10 px-4 py-3 text-sm text-rose-200"
    >
      {{ props.checkoutError }}
    </div>
  </section>
</template>