feat(gallery): use UModal and UCarousel

app/components/GalleryModal.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+type ImageMetadata = {
+  url: string;
+  date: string;
+  camera: string;
+  lens: string;
+  settings?: {
+    aperture?: string;
+    shutter?: string;
+    iso?: string;
+    focalLength?: string;
+  };
+};
+
+const props = defineProps<{
+  images: ImageMetadata[];
+  initialIndex: number;
+}>();
+
+const emit = defineEmits<{ close: [] }>();
+
+const currentIndex = ref(props.initialIndex);
+</script>
+
+<template>
+  <UModal fullscreen :ui="{ body: 'bg-black', header: 'hidden' }">
+    <template #body>
+      <div
+        class="relative w-full h-full flex flex-col items-center justify-center"
+      >
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="link"
+          size="xl"
+          class="absolute top-4 right-4 z-10"
+          aria-label="Close modal"
+          @click="emit('close')"
+        />
+
+        <UCarousel
+          v-slot="{ item }"
+          :items="images"
+          :ui="{
+            item: 'flex-shrink-0 flex flex-col items-center justify-center select-none',
+          }"
+          arrows
+          :prev="{
+            variant: 'link',
+            icon: 'i-lucide-chevron-left',
+            class: 'left-4!',
+            ui: { leadingIcon: 'size-8' },
+          }"
+          :next="{
+            variant: 'link',
+            icon: 'i-lucide-chevron-right',
+            class: 'right-4!',
+            ui: { leadingIcon: 'size-8' },
+          }"
+          class="w-full h-full mt-10"
+          @select="(index) => (currentIndex = index)"
+        >
+          <img
+            :src="item.url"
+            class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
+          />
+
+          <!-- metadata -->
+          <div
+            class="bg-black px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
+          >
+            <span>{{ item.date }}</span>
+            <span class="text-white/50">|</span>
+            <span>{{ item.camera }}</span>
+            <span class="text-white/50">|</span>
+            <span>{{ item.lens }}</span>
+            <template v-if="item.settings">
+              <span class="text-white/50">|</span>
+              <span v-if="item.settings.aperture">{{
+                item.settings.aperture
+              }}</span>
+              <span v-if="item.settings.shutter">{{
+                item.settings.shutter
+              }}</span>
+              <span v-if="item.settings.iso">ISO {{ item.settings.iso }}</span>
+              <span v-if="item.settings.focalLength">{{
+                item.settings.focalLength
+              }}</span>
+            </template>
+          </div>
+        </UCarousel>
+
+        <div class="text-white/70 text-sm">
+          {{ currentIndex + 1 }} / {{ images.length }}
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>