ptr.pet
1<script lang="ts" generics="T extends string">
2 interface Props {
3 tabs: T[];
4 activeTab: T;
5 onTabChange: (tab: T) => void;
6 }
7
8 let { tabs, activeTab = $bindable(), onTabChange }: Props = $props();
9</script>
10
11<div class="flex">
12 {#each tabs as tab (tab)}
13 {@const isActive = activeTab === tab}
14 <button
15 onclick={() => onTabChange(tab)}
16 class="flex-1 border-t-3 px-4 py-3 font-semibold transition-colors hover:cursor-pointer {isActive
17 ? 'border-(--nucleus-accent) bg-(--nucleus-accent)/20 text-(--nucleus-accent)'
18 : 'border-(--nucleus-accent)/20 bg-transparent text-(--nucleus-fg)/60 hover:bg-(--nucleus-accent)/10'}"
19 >
20 {tab}
21 </button>
22 {/each}
23</div>