From 733a79c3029a766fd38b75ac4d290d7ec60fea5e Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 20 Nov 2024 16:03:38 +0100
Subject: [PATCH] virtual sample : create static vue component and tabs system

---
 .../project/virtual-sample/Static.vue          |  1 +
 .../project/virtual-sample/VirtualSample.vue   | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 src/components/project/virtual-sample/Static.vue

diff --git a/src/components/project/virtual-sample/Static.vue b/src/components/project/virtual-sample/Static.vue
new file mode 100644
index 0000000..c743a23
--- /dev/null
+++ b/src/components/project/virtual-sample/Static.vue
@@ -0,0 +1 @@
+<template>vue static</template>
diff --git a/src/components/project/virtual-sample/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
index bc82d9f..b5bbd34 100644
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -14,18 +14,25 @@
         <button
           class="btn btn--transparent | font-serif"
           data-icon="cursor"
-          aria-pressed="true"
+          :aria-pressed="activeTab === 'dynamic' ? true : false"
+          @click="activeTab = 'dynamic'"
         >
           <span>Vue Dynamique</span>
         </button>
-        <button class="btn btn--transparent | font-serif" data-icon="image">
+        <button
+          @click="activeTab = 'static'"
+          class="btn btn--transparent | font-serif"
+          data-icon="image"
+          :aria-pressed="activeTab === 'static' ? true : false"
+        >
           <span>Vue statique</span>
         </button>
       </div>
       <h2 class="font-serif text-lg">Titre du rendu</h2>
     </template>
 
-    <Dynamic />
+    <Dynamic v-if="activeTab === 'dynamic'" />
+    <Static v-if="activeTab === 'static'" />
 
     <template #footer>
       <button
@@ -66,8 +73,8 @@
 import { storeToRefs } from "pinia";
 import Dialog from "primevue/dialog";
 import Dynamic from "./Dynamic.vue";
-import { computed, ref } from "vue";
-import { usePageStore } from "../../../stores/page";
+import Static from "./Static.vue";
+import { ref } from "vue";
 import { useDialogStore } from "../../../stores/dialog";
 
 const { file } = defineProps({
@@ -79,6 +86,7 @@ const { comments } = storeToRefs(useDialogStore());
 // Variables
 const isOpen = ref(true);
 const isCommentsOpen = ref(false);
+const activeTab = ref("dynamic");
 </script>
 
 <style scoped>