designtopack/src/views/Reunions.vue

<template>
  <main class="wrapper">
    <h2 id="tabslist" class="sr-only">Status</h2>
    <Tabs :tabs="tabs" @update:currentTab="changeTab" />
    <div class="flex flex-col | text-grey-700 | absolute inset-0 -z-1">
      <svg aria-hidden="true" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M6.25 8.75C5.58696 8.75 4.95107 9.01339 4.48223 9.48223C4.01339 9.95107 3.75 10.587 3.75 11.25V33.75C3.75 34.413 4.01339 35.0489 4.48223 35.5178C4.95107 35.9866 5.58696 36.25 6.25 36.25H33.75C34.413 36.25 35.0489 35.9866 35.5178 35.5178C35.9866 35.0489 36.25 34.413 36.25 33.75V11.25C36.25 10.587 35.9866 9.95107 35.5178 9.48223C35.0489 9.01339 34.413 8.75 33.75 8.75H28.75M3.75 18.75H36.25M11.25 3.75V13.75M28.75 3.75V13.75M11.25 8.75H23.75" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <p class="mb-32">Vous n’avez aucune réunion programmée</p>
      <button class="btn">Demander un RDV</button>
    </div>
  </main>
</template>

<script setup>
import Tabs from "../components/Tabs.vue";

import { usePageStore } from "../stores/page"
import { useUserStore } from "../stores/user";
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";

const { page } = storeToRefs(usePageStore());
const user = useUserStore().user;
const currentTab = ref("future");
const tabs = computed(() => {
  return [
    {
      label: "À venir",
      id: "future",
      icon: null,
      count: null,
      isActive: currentTab.value === "future",
    },
    {
      label: "Passées",
      id: "past",
      icon: null,
      count: null,
      isActive: currentTab.value === "past",
    },
  ];
});

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

<style scoped>
/* Tabs */
[role="tablist"] {
  margin-left: 0;
}
</style>