feat: add public catalog web foundation

2026-09-08 19:37:59 -04:00
parent a76d777a6b
commit 3d17637711
13 changed files with 2001 additions and 1 deletions
@@ -0,0 +1,44 @@
+<script setup>
+import { onMounted } from 'vue';
+
+import { useCatalogSearch } from '@/composables/useCatalogSearch.js';
+
+const { query, result, isLoading, error, load } = useCatalogSearch();
+
+onMounted(load);
+</script>
+
+<template>
+  <main class="catalog-page">
+    <header class="catalog-header">
+      <p class="catalog-kicker">Pokemon inventory</p>
+      <h1>Find the next favorite.</h1>
+      <p class="catalog-intro">Browse available cards, collectibles, and carefully cataloged pieces.</p>
+      <label class="search-field">
+        <span>Search the catalog</span>
+        <input v-model="query" type="search" placeholder="Try Charizard, 151, plush..." />
+      </label>
+    </header>
+
+    <section class="catalog-results" aria-live="polite">
+      <div class="results-heading">
+        <h2>Available now</h2>
+        <span v-if="!isLoading">{{ result.pagination.total }} results</span>
+      </div>
+
+      <p v-if="isLoading" class="catalog-state">Searching the catalog...</p>
+      <p v-else-if="error" class="catalog-state catalog-state--error">{{ error.message }}</p>
+      <p v-else-if="result.items.length === 0" class="catalog-state">No relevant matches found.</p>
+      <div v-else class="listing-grid">
+        <article v-for="item in result.items" :key="item.id" class="listing-card">
+          <div class="listing-card__mark" aria-hidden="true">PK</div>
+          <div>
+            <p class="listing-card__status">{{ item.status }}</p>
+            <h3>{{ item.productName }}</h3>
+            <p class="listing-card__price">${{ (item.askingPriceMinor / 100).toFixed(2) }}</p>
+          </div>
+        </article>
+      </div>
+    </section>
+  </main>
+</template>