Auctions index card

src/components/auctions/Index.vue

@@ -25,19 +25,33 @@ onMounted(async () => {
   await loadAuctions()
 })
 
+function formatPrice(price) {
+  const fmt = new Intl.NumberFormat("en-US", {style: "currency", currency: "USD"}) // TODO: maybe load currency from backend or env
+
+  return fmt.format(price)
+}
 </script>
 
 <template>
-  <div class="placeholder" v-if="isPending"></div>
+  <template v-if="isPending">
-  <ul v-else-if="!isPending && data != null && data.length > 0">
+    <div class="spinner-border me-1" role="status"></div>
-    <li v-for="auction in data" :key="auction.id">
+    <span>Loading…</span>
-      <span>{{ auction.name }}</span>
+  </template>
-      <span v-if="auction.current_bid">{{ auction.current_bid }}</span>
+  <div v-else-if="!isPending && data != null && data.length > 0" class="auctions-section" role="list">
-    </li>
+    <div v-for="auction in data" :key="auction.id" class="card" role="listitem">
-  </ul>
+      <div class="card-body">
+        <h2 class="h5">{{ auction.name }}</h2>
+        <p class="text-end">{{ formatPrice(auction.current_bid || auction.starting_price) }}</p>
+      </div>
+    </div>
+  </div>
   <p v-else>No auctions available</p>
 </template>
 
 <style scoped>
-
+.auctions-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
+  gap: 1em;
+}
 </style>

src/styles/app.scss

@@ -1 +1,7 @@
 @import "bootstrap/scss/bootstrap";
+
+/* Minor adjustments */
+
+.card-body > p:last-child {
+  margin-bottom: 0;
+}