103 lines
2.7 KiB
Vue
103 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<LandingPageHeader />
|
|
|
|
<main class="container mx-auto px-4 py-16 md:py-20">
|
|
<div class="flex items-center mb-8">
|
|
<button
|
|
@click="$emit('back')"
|
|
class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center mr-4"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 mr-1"
|
|
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
|
|
</button>
|
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-800">
|
|
Template {{ category }}
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="isLoading" class="text-center py-10">
|
|
<p>Memuat template...</p>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div v-else-if="error" class="text-center py-10 text-red-600">
|
|
<p>Gagal memuat template. Silakan coba lagi.</p>
|
|
</div>
|
|
|
|
<!-- Data Ada -->
|
|
<div
|
|
v-else-if="templates && templates.length > 0"
|
|
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 overflow-hidden shadow hover:shadow-lg transition-shadow"
|
|
>
|
|
<img
|
|
:src="`http://localhost:8000/storage/${tpl.foto}`"
|
|
:alt="tpl.nama_template"
|
|
class="bg-gray-200 h-48 w-full object-cover"
|
|
/>
|
|
<div class="p-4">
|
|
<h4 class="font-semibold truncate">{{ tpl.nama_template }}</h4>
|
|
<p class="text-gray-500">
|
|
Rp {{ Number(tpl.harga ?? 0).toLocaleString('id-ID') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Kosong -->
|
|
<div v-else class="text-center py-10 text-gray-500">
|
|
<p>Belum ada template untuk kategori ini.</p>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import LandingPageHeader from '~/components/landing-page/header.vue'
|
|
import Footer from '~/components/landing-page/footer.vue'
|
|
|
|
const props = defineProps({
|
|
category: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
id_category: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
defineEmits(['back'])
|
|
|
|
// Panggil API Laravel
|
|
const {
|
|
data: templates,
|
|
pending: isLoading,
|
|
error,
|
|
} =
|
|
useFetch(() => `/api/templates?kategori_id=${props.id_category}`, {
|
|
baseURL: 'http://localhost:8000',
|
|
key: () => `templates-${props.id_category}`,
|
|
transform: (res) => res ?? []
|
|
})
|
|
</script>
|