feat: compose public collectible detail views

2026-09-08 21:55:34 -04:00
parent 0d286f09a8
commit 5452bd5589
5 changed files with 101 additions and 18 deletions
@@ -0,0 +1,48 @@
+<script setup>
+import ConditionBadge from '@/components/atoms/ConditionBadge.vue';
+import PriceDisplay from '@/components/atoms/PriceDisplay.vue';
+import StatusBadge from '@/components/atoms/StatusBadge.vue';
+import ImageGallery from '@/components/molecules/ImageGallery.vue';
+
+defineProps({
+  title: { type: String, required: true },
+  status: { type: String, default: '' },
+  priceMinor: { type: Number, default: null },
+  condition: { type: String, default: '' },
+  description: { type: String, default: '' },
+  facts: { type: Array, default: () => [] },
+  images: { type: Array, default: () => [] },
+});
+</script>
+
+<template>
+  <article class="collectible-detail">
+    <div class="collectible-detail__gallery">
+      <ImageGallery :images="images" />
+    </div>
+    <div class="collectible-detail__identity">
+      <StatusBadge v-if="status" :status="status" />
+      <p class="catalog-kicker">Collectible identity</p>
+      <h1>{{ title }}</h1>
+      <p v-if="description" class="detail-notes">{{ description }}</p>
+      <div class="collectible-detail__summary">
+        <PriceDisplay v-if="priceMinor !== null" :amount-minor="priceMinor" />
+        <ConditionBadge v-if="condition" :label="condition" />
+      </div>
+      <dl v-if="facts.length" class="product-facts">
+        <div v-for="fact in facts" :key="fact.label">
+          <dt>{{ fact.label }}</dt>
+          <dd>{{ fact.value }}</dd>
+        </div>
+      </dl>
+    </div>
+  </article>
+</template>
+
+<style scoped lang="scss">
+.collectible-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
+.collectible-detail__identity { display: grid; gap: var(--space-4); padding-top: var(--space-6); }
+.collectible-detail__identity h1 { margin: 0; }
+.collectible-detail__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
+@media (max-width: 768px) { .collectible-detail { grid-template-columns: 1fr; gap: var(--space-6); } .collectible-detail__identity { padding-top: 0; } }
+</style>