designtopack/src/components/Projects.vue

<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"
    />
  </template>
</template>
<script setup>
import Tabs from "./Tabs.vue";
import TabPanel from "./TabPanel.vue";
import { useProjectsStore } from "../stores/projects";
import { ref } from "vue";
import { storeToRefs } from "pinia";

const { projects, currentProjects, archivedProjects } = storeToRefs(
  useProjectsStore()
);

const currentTab = ref("currentProjects");

function changeTab(newValue) {
  currentTab.value = newValue;
}
</script>

<style scoped></style>