[Kategori Desk]

proyek-frontend/app/components/template-page/CategorySelection.vue

@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div class="container mx-auto py-8">
+    <!-- Back button -->
     <div class="mb-8">
       <NuxtLink 
         to="/" 
@@ -11,40 +12,91 @@
         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."
+      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>
+    <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">
+    <!-- Kategori Grid -->
+    <div v-else-if="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">
+        <img 
+          v-if="category.foto" 
+          :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>
+          <p class="text-gray-500 mt-2">{{ 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>
-const emit = defineEmits(['category-selected']);
+import { ref, watch } from 'vue'
 
-// Gunakan useFetch yang lebih modern dan bersih
-const { data: categories, pending: isLoading, error } = useFetch('http://localhost:8000/api/kategoris');
+// 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
+  }
+}
+
+// Panggil saat component mounted
+fetchCategories()
+
+// Klik kategori
 const onCategoryClick = (category) => {
-  // Dan mengirimkan seluruh objek tersebut ke induk
-  emit('category-selected', category);
-};
+  emit('category-selected', category)
+}
+
+// Optional: watch categories untuk debugging
+watch(categories, (val) => {
+  console.log('Categories:', val)
+})
 </script>
+
+<style scoped>
+/* Optional hover effect */
+.group:hover img {
+  transform: scale(1.1);
+}
+</style>