45 satır
1,3 KiB
Vue
45 satır
1,3 KiB
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>
|