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,31 @@
+import CollectibleDetail from './CollectibleDetail.vue';
+
+export default { title: 'Organisms/CollectibleDetail', component: CollectibleDetail };
+
+export const ListingDetail = {
+  args: {
+    title: 'Charizard ex #199/165',
+    status: 'AVAILABLE',
+    priceMinor: 11500,
+    condition: 'Near Mint',
+    description: 'A clean collector copy with a clear front and back.',
+    facts: [
+      { label: 'Set', value: 'Scarlet & Violet 151' },
+      { label: 'Card number', value: '199/165' },
+      { label: 'Market context', value: '$120 reference' },
+      { label: 'Updated', value: 'Today' },
+    ],
+    images: [
+      { id: 'front', label: 'FRONT', alt: 'Front of Charizard ex' },
+      { id: 'back', label: 'BACK', alt: 'Back of Charizard ex' },
+    ],
+  },
+};
+
+export const ProductWithoutImages = {
+  args: {
+    title: 'Pikachu World Collection',
+    description: 'A representative product identity with images still to be added.',
+    facts: [{ label: 'Category', value: 'Collectible merchandise' }],
+  },
+};
@@ -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>