Magang-2025/Undangan
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix desain

Browse Source
This commit is contained in:
Muzakki Parsaoran Siregar 2025-09-15 16:43:26 +07:00
parent faae07f08c
commit 15aa085cea
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
proyek-frontend/app/components/template-page/CategorySelection.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="container mx-auto py-8"> <div class="max-w-7xl mx-auto px-4 py-8">
<!-- Back button --> <!-- Back button -->
<div class="mb-8"> <div class="mb-8">
<NuxtLink <NuxtLink
@ -28,22 +28,33 @@
</div> </div>
<!-- Kategori Grid --> <!-- Kategori Grid -->
<div v-else-if="categories.length > 0" class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8"> <div
v-else-if="categories.length > 0"
class="mt-12 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
>
<div <div
v-for="category in categories" v-for="category in categories"
:key="category.id + '-' + category.foto" :key="category.id + '-' + category.foto"
@click="onCategoryClick(category)" @click="onCategoryClick(category)"
class="group cursor-pointer overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300" class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-full"
> >
<!-- Foto portrait -->
<img <img
v-if="category.foto" v-if="category.foto"
:src="`http://localhost:8000${category.foto}`" :src="`http://localhost:8000${category.foto}`"
:alt="category.nama" :alt="category.nama"
class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-300" class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
> >
<div class="p-6 bg-white">
<h3 class="text-xl font-semibold text-gray-800">{{ category.nama }}</h3> <!-- Overlay hitam transparan -->
<p class="text-gray-500 mt-2">{{ category.deskripsi }}</p> <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
<!-- Teks kategori & deskripsi -->
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
<h3 class="text-xl font-semibold">{{ category.nama }}</h3>
<p class="text-sm mt-1 break-words leading-snug">
{{ category.deskripsi }}
</p>
</div> </div>
</div> </div>
</div> </div>
@ -55,7 +66,7 @@
</template> </template>
<script setup> <script setup>
import { ref, watch } from 'vue' import { ref, watch, onMounted, onActivated } from 'vue'
// Event emit ke parent // Event emit ke parent
const emit = defineEmits(['category-selected']) const emit = defineEmits(['category-selected'])
@ -83,23 +94,13 @@ const fetchCategories = async () => {
onMounted(fetchCategories) onMounted(fetchCategories)
onActivated(fetchCategories) onActivated(fetchCategories)
// Panggil saat component mounted
fetchCategories()
// Klik kategori // Klik kategori
const onCategoryClick = (category) => { const onCategoryClick = (category) => {
emit('category-selected', category) emit('category-selected', category)
} }
// Optional: watch categories untuk debugging // Debugging (opsional)
watch(categories, (val) => { watch(categories, (val) => {
console.log('Categories:', val) console.log('Categories:', val)
}) })
</script> </script>
<style scoped>
/* Optional hover effect */
.group:hover img {
transform: scale(1.1);
}
</style>