40 lines
941 B
Vue
40 lines
941 B
Vue
<template>
|
|
<section class="w-full max-w-6xl mx-auto text-center px-4">
|
|
<h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
|
|
Galeri Foto
|
|
</h1>
|
|
|
|
<div v-if="images && images.length" class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<img
|
|
v-for="(img, index) in images"
|
|
:key="index"
|
|
:src="img"
|
|
alt="gallery"
|
|
class="rounded-xl shadow-lg object-cover h-48 w-full hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else class="text-orange-800 bg-yellow-100 py-8 rounded-2xl shadow-inner">
|
|
<p class="text-lg font-semibold">Belum ada foto untuk ditampilkan</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
images: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
console.log('Gallery props images:', props.images)
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
img {
|
|
border: 3px solid rgba(255, 255, 255, 0.6);
|
|
}
|
|
</style>
|