From ff81b5b9bbdf052ef9d1b93678ab3265982b5e88 Mon Sep 17 00:00:00 2001
From: Artemiy Solopov <a.solopov.001@gmail.com>
Date: Wed, 9 Sep 2026 17:29:12 +0300
Subject: [PATCH] Auctions index card

---
 src/components/auctions/Index.vue | 30 ++++++++++++++++++++++--------
 src/styles/app.scss               |  8 +++++++-
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/auctions/Index.vue b/src/components/auctions/Index.vue
index c028a8c..fc08663 100644
--- a/src/components/auctions/Index.vue
+++ b/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>
-  <ul v-else-if="!isPending && data != null && data.length > 0">
-    <li v-for="auction in data" :key="auction.id">
-      <span>{{ auction.name }}</span>
-      <span v-if="auction.current_bid">{{ auction.current_bid }}</span>
-    </li>
-  </ul>
+  <template v-if="isPending">
+    <div class="spinner-border me-1" role="status"></div>
+    <span>Loading…</span>
+  </template>
+  <div v-else-if="!isPending && data != null && data.length > 0" class="auctions-section" role="list">
+    <div v-for="auction in data" :key="auction.id" class="card" role="listitem">
+      <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>
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d8dc8d2..687c49e 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1 +1,7 @@
-@import "bootstrap/scss/bootstrap";
\ No newline at end of file
+@import "bootstrap/scss/bootstrap";
+
+/* Minor adjustments */
+
+.card-body > p:last-child {
+  margin-bottom: 0;
+}
\ No newline at end of file