cosette/pages/index.vue

<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>