feat: add public listing detail web flow

2026-09-08 19:40:11 -04:00
parent 3d17637711
commit fd6d4cf37b
10 changed files with 128 additions and 16 deletions
@@ -0,0 +1,19 @@
+.listing-card {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  gap: 18px;
+  min-height: 180px;
+  padding: 20px;
+  border: 1px solid #d6d3c7;
+  background: #fffdf8;
+  color: #22231f;
+  text-decoration: none;
+  transition: border-color 160ms ease, transform 160ms ease;
+}
+
+.listing-card:hover { border-color: #386052; transform: translateY(-2px); }
+.listing-card:focus-visible { outline: 3px solid #a3482a; outline-offset: 4px; }
+.listing-card__mark { display: grid; place-items: center; aspect-ratio: 1; align-self: start; background: #d9e7df; color: #386052; font: 700 0.85rem Arial, sans-serif; }
+.listing-card__status { display: block; margin-top: 2px; color: #386052; font: 700 0.75rem/1.2 Arial, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
+.listing-card__name { display: block; margin: 8px 0 16px; font-size: 1.25rem; }
+.listing-card__price { display: block; font: 700 1rem Arial, sans-serif; }
@@ -0,0 +1,12 @@
+export default { title: 'Molecules/ListingCard' };
+
+export const available = {
+  args: {
+    listing: {
+      id: 'listing-1',
+      productName: 'Charizard ex',
+      askingPriceMinor: 2499,
+      status: 'AVAILABLE',
+    },
+  },
+};
@@ -0,0 +1,25 @@
+<script setup>
+import { RouterLink } from 'vue-router';
+
+defineProps({
+  listing: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <RouterLink class="listing-card" :to="{ name: 'listing-detail', params: { id: listing.id } }">
+    <span class="listing-card__mark" aria-hidden="true">PK</span>
+    <span>
+      <span class="listing-card__status">{{ listing.status }}</span>
+      <span class="listing-card__name">{{ listing.productName }}</span>
+      <span class="listing-card__price">${{ (listing.askingPriceMinor / 100).toFixed(2) }}</span>
+    </span>
+  </RouterLink>
+</template>
+
+<style scoped lang="scss">
+@use './ListingCard.scss';
+</style>