feat: compose public collectible detail views

apps/web/src/pages/ListingDetailPage.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 
 import { getPublicListing } from '@/services/catalog-service.js';
+import CollectibleDetail from '@/components/organisms/CollectibleDetail.vue';
 
 const route = useRoute();
 const listing = ref(null);
@@ -25,11 +26,13 @@ onMounted(async () => {
     <RouterLink class="detail-back" :to="{ name: 'catalog' }">Back to catalog</RouterLink>
     <p v-if="isLoading" class="catalog-state">Loading listing...</p>
     <p v-else-if="error" class="catalog-state catalog-state--error">{{ error.message }}</p>
-    <article v-else-if="listing" class="detail-content">
-      <p class="catalog-kicker">{{ listing.status }}</p>
-      <h1>{{ listing.productName }}</h1>
-      <p class="detail-price">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</p>
-      <p v-if="listing.notes" class="detail-notes">{{ listing.notes }}</p>
-    </article>
+    <CollectibleDetail
+      v-else-if="listing"
+      :title="listing.productName"
+      :status="listing.status"
+      :price-minor="listing.askingPriceMinor"
+      :condition="listing.conditionId"
+      :description="listing.notes"
+    />
   </main>
 </template>

apps/web/src/pages/ProductDetailPage.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 
 import { getPublicProduct } from '@/services/catalog-service.js';
+import CollectibleDetail from '@/components/organisms/CollectibleDetail.vue';
 
 const route = useRoute();
 const product = ref(null);
@@ -25,16 +26,16 @@ onMounted(async () => {
     <RouterLink class="detail-back" :to="{ name: 'catalog' }">Back to catalog</RouterLink>
     <p v-if="isLoading" class="catalog-state">Loading product...</p>
     <p v-else-if="error" class="catalog-state catalog-state--error">{{ error.message }}</p>
-    <article v-else-if="product" class="detail-content">
-      <p class="catalog-kicker">Product catalog</p>
-      <h1>{{ product.name }}</h1>
-      <p v-if="product.description" class="detail-notes">{{ product.description }}</p>
-      <dl class="product-facts">
-        <div v-if="product.brand"><dt>Brand</dt><dd>{{ product.brand }}</dd></div>
-        <div v-if="product.setName"><dt>Set</dt><dd>{{ product.setName }}</dd></div>
-        <div v-if="product.cardNumber"><dt>Card number</dt><dd>{{ product.cardNumber }}</dd></div>
-        <div v-if="product.releaseYear"><dt>Release year</dt><dd>{{ product.releaseYear }}</dd></div>
-      </dl>
-    </article>
+    <CollectibleDetail
+      v-else-if="product"
+      :title="product.name"
+      :description="product.description"
+      :facts="[
+        ...(product.brand ? [{ label: 'Brand', value: product.brand }] : []),
+        ...(product.setName ? [{ label: 'Set', value: product.setName }] : []),
+        ...(product.cardNumber ? [{ label: 'Card number', value: product.cardNumber }] : []),
+        ...(product.releaseYear ? [{ label: 'Release year', value: product.releaseYear }] : []),
+      ]"
+    />
   </main>
 </template>