Undangan/proyek-frontend/app/components/templates/khitan/Gallery.vue

<template>
  <div class="min-h-screen w-full relative bg-gradient-to-br from-blue-900 via-blue-800 to-blue-900 overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 bg-pattern opacity-30"></div>

    <!-- Main Content -->
    <div class="relative z-10 flex flex-col items-center justify-center px-6 py-18">
      <!-- Gallery Title -->
      <div class="text-center mb-8 animate-fade-in-down">
        <h1 class="text-yellow-400 text-4xl md:text-5xl font-bold mb-6 font-script">
          Galeri
        </h1>
        <p class="text-white text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
          Aku hadir ke dunia ini atas izin Allah, dan kini tiba waktuku untuk 
          menjalani salah satu sunnah-Nya. Mohon doa dan restunya di momen 
          berharga dalam hidupku ini.
        </p>
      </div>

      <!-- ✅ Masonry-style Gallery -->
      <div class="flex-1 max-w-5xl mx-auto w-full animate-fade-in-up animation-delay-300">
        <div class="columns-2 md:columns-3 gap-4 space-y-4">
          <div
            v-for="(image, index) in images"
            :key="index"
            class="relative group break-inside-avoid cursor-pointer"
            @click="openModal(index)"
          >
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl overflow-hidden border border-yellow-400/30 hover:border-yellow-400/60 transition-all duration-300">
              <img
                :src="image"
                :alt="`Gallery Image ${index + 1}`"
                class="w-full h-auto object-cover group-hover:scale-105 transition-transform duration-300"
                @error="handleImageError"
              />
              <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 flex items-center justify-center transition-colors duration-300">
                <Icon name="lucide:zoom-in" class="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              </div>
            </div>
          </div>

          <!-- Jika tidak ada foto -->
          <div v-if="images.length === 0" class="col-span-full text-center py-8 bg-white/10 rounded-xl text-white/70">
            Belum ada foto untuk ditampilkan.
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Preview -->
    <Teleport to="body">
      <div
        v-if="selectedImage !== null"
        class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
        @click="closeModal"
      >
        <div class="relative max-w-4xl max-h-full" @click.stop>
          <!-- Tombol close -->
          <button
            @click="closeModal"
            class="absolute -top-12 right-0 text-white hover:text-yellow-400 transition-colors duration-300"
          >
            <Icon name="lucide:x" class="w-8 h-8" />
          </button>

          <!-- Gambar besar -->
          <img
            :src="images[selectedImage]"
            :alt="`Gallery Image ${selectedImage + 1}`"
            class="max-w-full max-h-full object-contain rounded-lg shadow-2xl"
            @error="handleImageError"
          />

          <!-- Navigasi kiri-kanan -->
          <button
            v-if="selectedImage > 0"
            @click.stop="navigateImage(-1)"
            class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-2 rounded-full transition-all duration-300"
          >
            <Icon name="lucide:chevron-left" class="w-6 h-6" />
          </button>

          <button
            v-if="selectedImage < images.length - 1"
            @click.stop="navigateImage(1)"
            class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-2 rounded-full transition-all duration-300"
          >
            <Icon name="lucide:chevron-right" class="w-6 h-6" />
          </button>

          <!-- Counter -->
          <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm">
            {{ selectedImage + 1 }} / {{ images.length }}
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  images: {
    type: Array,
    default: () => []
  }
})

// State
const selectedImage = ref(null)
const placeholderImage = '/pria.jpg'

// Modal Control
const openModal = (index) => {
  selectedImage.value = index
  document.body.style.overflow = 'hidden'
}

const closeModal = () => {
  selectedImage.value = null
  document.body.style.overflow = ''
}

const navigateImage = (direction) => {
  const newIndex = selectedImage.value + direction
  if (newIndex >= 0 && newIndex < props.images.length) {
    selectedImage.value = newIndex
  }
}

const handleImageError = (event) => {
  event.target.src = placeholderImage
}

// Keyboard Control
const handleKeyPress = (event) => {
  if (selectedImage.value !== null) {
    switch (event.key) {
      case 'Escape': closeModal(); break
      case 'ArrowLeft': navigateImage(-1); break
      case 'ArrowRight': navigateImage(1); break
    }
  }
}

// Lifecycle
onMounted(() => {
  window.addEventListener('keydown', handleKeyPress)
})

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyPress)
  document.body.style.overflow = ''
})
</script>

<style scoped>
.bg-pattern {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="islamic" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><g fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"><path d="M12.5 0 L25 12.5 L12.5 25 L0 12.5 Z M6.25 6.25 L18.75 6.25 L18.75 18.75 L6.25 18.75 Z"/><circle cx="12.5" cy="12.5" r="3"/></g></pattern></defs><rect width="100%" height="100%" fill="url(%23islamic)"/></svg>');
}

/* Masonry layout fix */
.break-inside-avoid {
  break-inside: avoid;
}
</style>