portfolio/components/ImageViewer.vue

<template>
  <div class="flex flex-col h-full">
    <div class="relative h-[60vh] w-full flex items-center justify-center">
      <!-- Image -->
      <NuxtImg 
        v-if="gallery[currentIndex]"
        :src="'/' + bucket + '/' + gallery[currentIndex].image" 
        class="max-w-full max-h-full object-contain"
      />
    </div>

    <!-- Dots indicator -->
    <div v-if="gallery.length > 1" class="flex gap-2 py-2 justify-center">
      <button 
        v-for="(img, index) in gallery" 
        :key="index"
        @click="currentIndex = index"
        class="w-2 h-2 rounded-full transition-colors"
        :class="index === currentIndex ? 'bg-gray-600' : 'bg-gray-300'"
      />
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  bucket: String,
  gallery: Array,
  initialIndex: {
    type: Number,
    default: 0
  }
})

const currentIndex = ref(props.initialIndex)

watch(() => props.initialIndex, (newVal) => {
  currentIndex.value = newVal
})
</script>