111 lines
3.3 KiB
Vue
111 lines
3.3 KiB
Vue
<template>
|
|
<div class="max-w-7xl mx-auto px-4 py-8">
|
|
<!-- Back button -->
|
|
<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>
|
|
|
|
<!-- Header -->
|
|
<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>
|
|
|
|
<!-- Loading / Error -->
|
|
<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>
|
|
|
|
<!-- Kategori Grid -->
|
|
<div
|
|
v-else-if="categories.length > 0"
|
|
class="mt-12 flex flex-wrap justify-center gap-6"
|
|
>
|
|
<div
|
|
v-for="category in categories"
|
|
:key="category.id + '-' + category.foto"
|
|
@click="onCategoryClick(category)"
|
|
class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
|
|
>
|
|
<!-- Foto portrait -->
|
|
<img
|
|
v-if="category.foto"
|
|
:src="`http://localhost:8000${category.foto}`"
|
|
:alt="category.nama"
|
|
class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
|
|
>
|
|
|
|
<!-- Overlay hitam transparan -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
|
|
|
|
<!-- Teks kategori & deskripsi -->
|
|
<div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
|
|
<h3 class="text-xl font-semibold mb-2">
|
|
{{ category.nama }}
|
|
</h3>
|
|
<p
|
|
class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]"
|
|
>
|
|
{{ category.deskripsi }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="mt-12 text-center text-gray-500">
|
|
Belum ada kategori.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted, onActivated } from 'vue'
|
|
|
|
// Event emit ke parent
|
|
const emit = defineEmits(['category-selected'])
|
|
|
|
// State categories
|
|
const categories = ref([])
|
|
const isLoading = ref(true)
|
|
const error = ref(null)
|
|
|
|
// Fetch data kategori dari API Laravel
|
|
const fetchCategories = async () => {
|
|
isLoading.value = true
|
|
error.value = null
|
|
try {
|
|
const res = await $fetch('http://localhost:8000/api/kategoris')
|
|
categories.value = res
|
|
} catch (err) {
|
|
console.error(err)
|
|
error.value = 'Gagal memuat kategori.'
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(fetchCategories)
|
|
onActivated(fetchCategories)
|
|
|
|
// Klik kategori
|
|
const onCategoryClick = (category) => {
|
|
emit('category-selected', category)
|
|
}
|
|
|
|
// Debugging (opsional)
|
|
watch(categories, (val) => {
|
|
console.log('Categories:', val)
|
|
})
|
|
</script>
|