add project image visualizer

src/components/ImageDialog.vue

+<template>
+  <q-dialog>
+    <div class="column justify-center items-center content-center" >
+      <q-btn icon="close" size="lg" class="absolute q-mt-md bg-secondary" style="top: 0px; z-index: 20000" text-color="primary" unelevated round v-close-popup />
+      <div class="absolute" style="margin: 10%; height: auto">
+        <img class="full-height full-width" style="border-radius: 10px" :src="src" />
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  src: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/components/ImageView.vue

@@ -19,9 +19,11 @@
     >
       <swiper-slide v-for="{src,nb} in imageProjet" zoom :key="nb">
         <img
+          class="cursor-pointer"
           :src="src"
           loading="lazy"
           style="border-radius: 10px"
+          @click="showImg = true;imgSelected = src"
         />
         <div
           class="swiper-lazy-preloader swiper-lazy-preloader-white"
@@ -29,6 +31,7 @@
       >
     </swiper>
   </div>
+  <image-dialog v-model="showImg" :src="imgSelected" />
 </template>
 
 <script setup lang="ts">
@@ -44,6 +47,10 @@ import 'swiper/css/navigation';
 import TitleComposant from 'components/TitleComposant.vue';
 import type { PropType } from 'vue';
 import images from './images';
+import ImageDialog from 'components/ImageDialog.vue'
+
+const imgSelected = ref('')
+const showImg = ref(false)
 
 const props = defineProps({
   id: {