Add VirtualSample dialogD, create .dialog class

src/components/project/VirtualSample.vue

@@ -1,5 +1,109 @@
 <template>
-  <div>Échantillon virtuel</div>
+  <Dialog
+    id="virtual-sample"
+    v-model:visible="isOpen"
+    modal
+    :draggable="false"
+    header="Titre du rendu"
+    class="dialog"
+    :class="{ 'with-comments': isCommentsOpen }"
+    :closeOnEscape="true"
+  >
+    <template #header>
+      <div class="dialog__tabs">
+        <button 
+          class="btn btn--transparent | font-serif" 
+          data-icon="cursor"
+          aria-pressed="true"
+        >
+          <span>Vue Dynamique</span>
+        </button>
+        <button 
+          class="btn btn--transparent | font-serif" 
+          data-icon="image"
+        >
+          <span>Vue statique</span>
+        </button>
+      </div>
+      <h2 class="font-serif text-lg">Titre du rendu</h2>
+    </template>
+    <div class="dialog__inner">
+      <header class="flex">
+        <div class="options-selector">
+          <button 
+            class="btn btn--image"
+            aria-pressed="true"
+            style="--btn-image: url('https://images.unsplash.com/photo-1708486855543-6010a133280f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHBhcmZ1bWUlMjBib3R0bGV8ZW58MHx8MHx8fDA%3D')" 
+          >
+            <span>Piste 1</span>
+          </button>
+          <button 
+            class="btn btn--image"
+            style="--btn-image: url('https://images.unsplash.com/photo-1680607622631-1e243ddd6782?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8cGFyZnVtZSUyMGJvdHRsZXxlbnwwfHwwfHx8MA%3D%3D')" 
+          >
+            <span>Piste 2</span>
+          </button>
+        </div>
+        <button 
+          class="btn | ml-auto" 
+        >
+          <span>Comparer les pistes</span>
+        </button>
+      </header>
+    </div>
+    <template #footer>
+      <button 
+        id="download-image"
+        class="btn btn--white-10" 
+        data-icon="download"
+      >
+        <span>Sauvegarder l’image</span>
+      </button>
+      <button 
+        id="loop-animation"
+        class="btn btn--transparent btn--outline" 
+        data-icon="loop"
+      >
+        <span>Animation en boucle</span>
+      </button>
+      <button
+        id="toggle-comments"
+        :aria-pressed="isCommentsOpen"
+        class="btn btn--transparent btn--outline"
+        data-icon="comment"
+        @click="isCommentsOpen = !isCommentsOpen"
+      >
+        <span class="sr-only">Afficher les commentaires</span>
+      </button>
+      <Comments
+        v-if="isCommentsOpen"
+        :current-page-index="currentPageIndex"
+        :file="file"
+        :comments="file.comments"
+        @update:file="changeFile"
+      />
+    </template>
+  </Dialog>
 </template>
-<script setup></script>
-<style scoped></style>
+
+<script setup>
+import Dialog from "primevue/dialog";
+import { ref, watch } from "vue";
+
+const { file } = defineProps({
+  file: Object,
+});
+
+// Variables
+const isOpen = ref(false);
+watch(isOpen, (newValue) => {
+  emits("close");
+});
+const isCommentsOpen = ref(false);
+</script>
+
+<style scoped>
+.dialog__inner {
+  padding: var(--space-16);
+}
+</style>