redesign tabs

src/components/Tabs.vue

@@ -19,27 +19,30 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed } from "vue";
 import slugify from "slugify";
 
-const { projects } = defineProps({
-  projects: Array,
+const { currentProjects, archivedProjects } = defineProps({
+  currentProjects: Array,
+  archivedProjects: Array,
 });
 
-const tabs = ref([
-  {
-    label: "Projets en cours",
-    id: "current",
-    count: projects.filter((project) => project.status === "listed").length,
-    isActive: true,
-  },
-  {
-    label: "Projets archivés",
-    id: "archived",
-    count: projects.filter((project) => project.status === "unlisted").length,
-    isActive: false,
-  },
-]);
+const tabs = computed(() => {
+  return [
+    {
+      label: "Projets en cours",
+      id: "currentProjects",
+      count: currentProjects.length,
+      isActive: true,
+    },
+    {
+      label: "Projets archivés",
+      id: "archivedProjects",
+      count: archivedProjects.length,
+      isActive: false,
+    },
+  ];
+});
 
 const emit = defineEmits(["update:currentTab"]);