first commit

app/components/designer/DesignerPreview.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = defineProps<{
+  isCheckoutPending: boolean;
+  checkoutPrice: number;
+  checkoutError: string | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "checkout"): void;
+}>();
+
+const handleCheckout = () => emit("checkout");
+
+const priceLabel = computed(() => props.checkoutPrice.toFixed(2));
+</script>
+
+<template>
+  <section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+    <div class="space-y-4">
+      <button
+        type="button"
+        class="w-full rounded-xl border-2 border-emerald-600 bg-emerald-600 px-6 py-4 text-base font-semibold text-white transition hover:bg-white hover:text-emerald-600 disabled:cursor-not-allowed disabled:opacity-60"
+        :disabled="props.isCheckoutPending"
+        @click="handleCheckout"
+      >
+        {{ props.isCheckoutPending ? "Redirecting…" : `Buy This Design ($${priceLabel})` }}
+      </button>
+      <div
+        v-if="props.checkoutError"
+        class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700"
+      >
+        {{ props.checkoutError }}
+      </div>
+    </div>
+  </section>
+</template>