(WIP) Auction show

src/components/auctions/Index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import {ref, watch} from 'vue'
+import {useStore} from '@nanostores/vue'
+import {$user} from '../stores/user'
+import * as gateway from '../lib/gateway.js'
+
+const user = useStore($user)
+const auctions = ref([])
+
+watch(user, async (userVal) => {
+  if(userVal == null) return;
+
+  const response = await gateway.request('/auctions',
+      {cors: true, token: userVal.token, searchParams: {page: 1, per: 50}}
+  )
+
+  if (response.ok) {
+    auctions.value = await response.json()
+  }
+}, {immediate: true})
+
+</script>
+
+<template>
+  <ul>
+    <li v-for="auction in auctions" :key="auction.id">
+      <h3>{{ auction.summary }}</h3>
+      <a :href="`/auctions/auction?id=${auction.id}`">See more</a>
+    </li>
+  </ul>
+</template>

src/components/auctions/Show.vue

@@ -0,0 +1,17 @@
+<script setup>
+  import {useStore} from "@nanostores/vue";
+  import {$user} from "../stores/user.js";
+
+  const id = new URL(location).searchParams.get("id")
+</script>
+
+<template>
+  <template v-if="id">
+    <span>{{ id }}</span>
+  </template>
+  <div v-else>ERROR</div>
+</template>
+
+<style scoped>
+
+</style>

src/pages/auctions/auction.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import AuctionShow from "../../components/auctions/Show.vue"
+---
+
+<Layout title="See auction">
+    <AuctionShow client:only />
+</Layout>

src/pages/auctions/index.astro

@@ -0,0 +1,8 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import AuctionsIndex from '../../components/auctions/Index.vue'
+---
+
+<Layout title="Auctions">
+	<AuctionsIndex client:load />
+</Layout>