dynamize projects

src/components/Tabs.vue

@@ -0,0 +1,116 @@
+<template>
+  <h2 id="tabslist" class="sr-only">Projets</h2>
+  <header role="tablist" aria-labelledby="tablist">
+    <button
+      v-for="tab in tabs"
+      :key="tab.label"
+      :id="slugify(tab.label) + '-label'"
+      type="button"
+      role="tab"
+      :aria-selected="tab.isActive"
+      :aria-controls="slugify(tab.label)"
+      :tabindex="tab.isActive ? '-1' : false"
+      @click="changeTab(tab.id)"
+    >
+      <span class="label">{{ tab.label }}</span>
+      <span class="count">{{ tab.count }}</span>
+    </button>
+  </header>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import slugify from "slugify";
+
+const { projects } = defineProps({
+  projects: 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 emit = defineEmits(["update:currentTab"]);
+
+function changeTab(tabId) {
+  emit("update:currentTab", tabId);
+}
+</script>
+
+<style scoped>
+[role="tablist"] {
+  width: fit-content;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 auto var(--space-md);
+  border-radius: var(--rounded-full);
+  min-height: 60px;
+}
+
+[role="tab"] {
+  --tab-height: 2.5rem;
+  --tab-py: var(--space-md);
+  --tab-px: var(--space-lg);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--text-md);
+  border-radius: var(--rounded-full);
+  background-color: var(--background, var(--color-background));
+  color: var(--color, var(--color-text));
+  z-index: 2;
+  padding: var(--tab-py) var(--tab-px);
+  margin: 0;
+  cursor: pointer;
+  gap: var(--space-lg);
+  height: var(--tab-height);
+}
+[role="tab"]:focus,
+[role="tab"]:hover {
+}
+[role="tab"] .label {
+  flex-grow: 1;
+  font-family: var(--font-serif);
+}
+[role="tab"] .count {
+  font-size: var(--text-sm);
+  font-weight: 500;
+}
+
+[role="tab"][aria-selected="true"] {
+  --background: var(--color-background);
+  z-index: 10;
+}
+[role="tab"][aria-selected="false"] {
+  --background: var(--color-grey-200);
+  --color: var(--color-grey-700);
+}
+
+[role="tab"][aria-selected="true"] + [aria-selected="false"]::before {
+  content: "";
+  display: inline-block;
+  height: var(--tab-height);
+  width: calc(var(--tab-px) * 2);
+  position: absolute;
+  left: calc(var(--tab-px) * -1);
+  background-color: var(--color-grey-200);
+  z-index: -1;
+}
+
+[role="tabpanel"] {
+  width: 100%;
+  overflow: auto;
+}
+</style>