feat(gallery): load and display exif data

app/components/GalleryModal.vue

@@ -1,19 +1,8 @@
 <script setup lang="ts">
-type ImageMetadata = {
-  url: string;
-  date: string;
-  camera: string;
-  lens: string;
-  settings?: {
-    aperture?: string;
-    shutter?: string;
-    iso?: string;
-    focalLength?: string;
-  };
-};
+import type { InternalApi } from "nitropack/types";
 
 const props = defineProps<{
-  images: ImageMetadata[];
+  images: InternalApi["/api/gallery"]["get"][number][];
   initialIndex: number;
 }>();
 
@@ -76,24 +65,16 @@ const currentIndex = ref(props.initialIndex);
           <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>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
             <span class="text-white/50">|</span>
-            <span>{{ item.camera }}</span>
+            <span>{{ item.exif.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>
+            <span>{{ item.exif.lens }}</span>
+            <span class="text-white/50">|</span>
+            <span>{{ item.exif.settings.aperture }}</span>
+            <span>{{ item.exif.settings.shutter }}</span>
+            <span>ISO {{ item.exif.settings.iso }}</span>
+            <span>{{ item.exif.settings.focalLength }}</span>
           </div>
         </UCarousel>