sounds, better files

src/components/Tabs.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tabs">
+    <div class="tabbar">
+      <div
+        class="tab"
+        :class="{active: selectedTab === tab.key}"
+        v-for="tab in tabs" @click="selectedTab = tab.key"
+        >
+        {{ tab.label }}
+      </div>
+    </div>
+    <div v-for="slot, name in slots" v-show="selectedTab === name">
+      <slot :name="name"></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue';
+
+const props = defineProps<{
+  tabs: {label: string, key: string}[]
+}>()
+
+const slots = defineSlots<{
+  slotName: string,
+  Id: string,
+}>()
+
+console.log(slots)
+
+const selectedTab = ref(props.tabs?.[0]?.key);
+
+</script>
+<style>
+
+@scope(.tabs) {
+  .tabbar {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0 0.5rem;
+    border-bottom: 1px solid white;
+  }
+  .tab {
+    cursor: pointer;
+    padding: 0.5rem;
+    border:1px solid white;
+    border-bottom: none;
+    border-radius: 5px 5px 0 0;
+
+    &.active {
+      background-color: white;
+      color: black;
+    }
+  }
+}
+</style>