50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex items-center mb-8">
|
|
<button @click="$emit('back')" class="text-blue-600 hover:text-blue-800 font-semibold mr-4">
|
|
← Kembali ke Kategori
|
|
</button>
|
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-800">
|
|
Pilih Template {{ category }} Favoritmu
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div v-for="tpl in templates" :key="tpl.id" class="border rounded-lg p-4 text-center">
|
|
<img :src="tpl.foto" :alt="tpl.nama" class="bg-gray-200 h-40 mb-4 rounded-md object-cover w-full" />
|
|
<h4 class="font-semibold">{{ tpl.nama }}</h4>
|
|
<p class="text-gray-500">Rp {{ tpl.harga }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
category: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
id_category: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const templates = ref([])
|
|
|
|
const fetchTemplates = async () => {
|
|
try {
|
|
templates.value = await $fetch(`http://localhost:8000/api/templates/category/${props.id_category}`)
|
|
} catch (error) {
|
|
console.error('Gagal ambil template:', error)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchTemplates()
|
|
})
|
|
|
|
defineEmits(['back']);
|
|
</script>
|