portfolio/components/ImageViewer.vue

<template>
  <div class="flex flex-col h-full">
    <div class="flex-1 flex items-center justify-center min-h-0">
      <div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
        <!-- Image -->
        <NuxtImg 
          v-if="gallery[currentIndex]"
          :src="'/' + bucket + '/' + gallery[currentIndex].image" 
          class="w-full h-full object-contain"
        />
      </div>
    </div>

    <!-- Dots indicator -->
    <div v-if="gallery.length > 1" class="flex-none 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>