|
@@ -1,31 +1,38 @@
|
|
|
<script setup>
|
|
|
-const cosette = await $fetch('/api/cosette')
|
|
|
+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/>
|
|
|
-
|
|
|
+ <Hero />
|
|
|
<div class="container mx-auto flex items-center flex-wrap pt-4 pb-12 px-2">
|
|
|
- <nav id="store" class="w-full z-30 top-0 px-6 py-1">
|
|
|
- <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3">
|
|
|
- <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-yellow text-xl" href="https://it.hackmeeting.org">Hackmeeting 0x19</a>
|
|
|
- <div class="flex items-center" id="store-nav-content">
|
|
|
- <a class="pl-3 inline-block no-underline hover:text-black modal-button" href="#my-modal">
|
|
|
- <Icon-ic:baseline-add/>
|
|
|
- </a>
|
|
|
- <a class="pl-3 inline-block no-underline hover:text-black" href="#">
|
|
|
- <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
|
- <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" />
|
|
|
- </svg>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <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="p-10 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 cosette' :key='cosetta.id' :cosetta='cosetta' />
|
|
|
+
|
|
|
+ <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>
|