123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <script setup>
- const page = ref(0)
- let { data, refresh } = await useFetch(() => `/api/cosette?page=${page.value}`)
- function next() {
- page.value++
- refresh()
- }
- function prev() {
- page.value--
- refresh()
- }
- </script>
- <template>
- <section class="bg-white py-8">
- <Upload />
- <Hero />
- <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2">
- <p>Ci sono <strong>{{ data.details.count }}</strong> cosette in tutto, sei a pagina {{ data.details.page + 1 }} di
- {{ data.details.n_page }}. Se vuoi puoi</p>
- <a class="text-orange-700 hover:underline flex" href="#my-modal">
- <Icon-ic:baseline-add /> aggiungere una cosetta
- </a>
- </div>
- <div class='container mx-auto'>
- <nav>
- <button v-if='data.details.prev' @click='prev'>
- <Icon-ic:baseline-chevron-left style='font-size: 40px' />
- </button>
- <button v-if='data.details.next' @click='next'>
- <Icon-ic:baseline-chevron-right style='font-size: 40px' />
- </button>
- </nav>
- <div class="md:p-5 p-1 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-5">
- <Cosetta v-for='cosetta in data.cosette' :key='cosetta.id' :cosetta='cosetta' />
- </div>
- </div>
- </section>
- </template>
|