Added image carousel in dialog

package.json

@@ -9,5 +9,6 @@
     },
     "keywords": [],
     "author": "",
-    "license": "ISC"
-}
+    "license": "ISC",
+    "packageManager": "[email protected]+sha512.98a80fd11c2e7096747762304106432b3ddc67dcf54b5a8c01c93f68a2cd5e05e6821849522a06fb76284d41a2660d5e334f2ee3bbf29183bf2e739b1dafa771"
+}

packages/frontendmu-nuxt/components/meetup/Album.vue

@@ -1,12 +1,45 @@
 <template>
   <div class="lg:mx-auto lg:w-[80%] px-4">
     <div v-if="getCurrentEvent.album" class="flex flex-col items-center gap-8 py-20">
-      <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-        <div v-for="photo in currentAlbum" :key="photo" class="aspect-video">
-          <img :src="`${source}/${photo}`"
-            class="object-cover w-full h-full object-center block rounded-md overflow-hidden" loading="lazy" />
+      <Dialog>
+        <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <div v-for="(photo, index) in currentAlbum" :key="photo" class="aspect-video">
+            <DialogTrigger as-child>
+              <img
+                :src="`${source}/${photo}`"
+                @click="setActiveImageIndex(index)"
+                loading="lazy"
+                tabindex="0"
+                class="object-cover w-full h-full object-center block rounded-md overflow-hidden cursor-zoom-in hover:scale-105 focus-visible:scale-105 transition-transform"
+              />
+            </DialogTrigger>
+          </div>
         </div>
-      </div>
+        <DialogContent
+          class="bg-zinc-950 bg-opacity-80 border-zinc-800 max-w-7xl"
+        >
+          <DialogHeader>
+            <DialogTitle class="sr-only">Photos</DialogTitle>
+            <DialogDescription class="sr-only"
+              >Photos in carousel</DialogDescription
+            >
+          </DialogHeader>
+          <Carousel
+            :opts="{ startIndex: activeImageIndex }"
+            class="relative max-h-[calc(100svh-160px)] rounded-md overflow-hidden"
+          >
+            <CarouselContent class="h-full max-h-[calc(100svh-160px)]">
+              <CarouselItem v-for="photo in currentAlbum" :key="photo">
+                <div class="w-full h-full flex flex-row justify-center items-center">
+                  <img :src="`${source}/${photo}`" class="object-contain max-w-full max-h-full block rounded-md overflow-hidden" />
+                </div>
+              </CarouselItem>
+            </CarouselContent>
+            <CarouselPrevious class="left-1 bg-[#00000097]" />
+            <CarouselNext class="right-1 bg-[#00000097]" />
+          </Carousel>
+        </DialogContent>
+      </Dialog>
       <!-- ToDo -->
       <!--
       <div
@@ -32,9 +65,13 @@ const props = defineProps<{
 
 const limit = ref(10); // Set your desired limit here
 const maxAlbumLength = computed(() => props.currentAlbum.length);
+const activeImageIndex = ref(0);
 
 function viewMore() {
   // Implement your logic here
 }
 
+function setActiveImageIndex(index: number) {
+  activeImageIndex.value = index;
+}
 </script>