50 lines
2.0 KiB
Vue
50 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mb-8">
|
|
<NuxtLink
|
|
to="/"
|
|
class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
Kembali ke Beranda
|
|
</NuxtLink>
|
|
</div>
|
|
<h1 class="text-3xl md:text-4xl font-bold text-center text-gray-800">
|
|
Pilih Template Favoritmu
|
|
</h1>
|
|
<p class="mt-2 text-center text-gray-500">
|
|
"Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya."
|
|
</p>
|
|
|
|
<div v-if="isLoading" class="mt-12 text-center">Memuat kategori...</div>
|
|
<div v-else-if="error" class="mt-12 text-center text-red-500">Gagal memuat kategori.</div>
|
|
|
|
<div v-else-if="categories && categories.length > 0" class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
@click="onCategoryClick(category)"
|
|
class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
|
|
>
|
|
<img :src="category.foto" :alt="category.nama" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300">
|
|
<div class="p-6 bg-white">
|
|
<h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const emit = defineEmits(['category-selected']);
|
|
|
|
// Gunakan useFetch yang lebih modern dan bersih
|
|
const { data: categories, pending: isLoading, error } = useFetch('http://localhost:8000/api/kategoris');
|
|
|
|
const onCategoryClick = (category) => {
|
|
// Dan mengirimkan seluruh objek tersebut ke induk
|
|
emit('category-selected', category);
|
|
};
|
|
</script> |