start dynamizing inspirations page

src/components/Projects.vue

@@ -1,23 +1,41 @@
 <template>
   <h2 id="tabslist" class="sr-only">Projets</h2>
   <template v-if="projects.length > 0">
-    <Tabs
-      :currentProjects="currentProjects"
-      :archivedProjects="archivedProjects"
-      @update:currentTab="changeTab"
-    />
-    <TabPanel
-      :currentProjects="currentProjects"
-      :archivedProjects="archivedProjects"
-      :currentTab="currentTab"
-    />
+    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
+    <section
+      v-if="currentTab === 'currentProjects'"
+      id="projets-en-cours"
+      role="tabpanel"
+      tabindex="0"
+      aria-labelledby="projets-en-cours-label"
+      class="flow"
+    >
+      <Project
+        v-for="project in currentProjects"
+        :key="project.id"
+        :project="project"
+      />
+    </section>
+    <section
+      v-else
+      id="projets-archives"
+      role="tabpanel"
+      tabindex="0"
+      aria-labelledby="projet-archives-label"
+    >
+      <Project
+        v-for="project in archivedProjects"
+        :key="project.id"
+        :project="project"
+      />
+    </section>
   </template>
 </template>
 <script setup>
 import Tabs from "./Tabs.vue";
-import TabPanel from "./TabPanel.vue";
+import Project from "./Project.vue";
 import { useProjectsStore } from "../stores/projects";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 
 const { projects, currentProjects, archivedProjects } = storeToRefs(
@@ -25,6 +43,22 @@ const { projects, currentProjects, archivedProjects } = storeToRefs(
 );
 
 const currentTab = ref("currentProjects");
+const tabs = computed(() => {
+  return [
+    {
+      label: "Projets en cours",
+      id: "currentProjects",
+      count: currentProjects.value.length,
+      isActive: true,
+    },
+    {
+      label: "Projets archivés",
+      id: "archivedProjects",
+      count: archivedProjects.value.length,
+      isActive: false,
+    },
+  ];
+});
 
 function changeTab(newValue) {
   currentTab.value = newValue;