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>