52 lines
1 KiB
Svelte
52 lines
1 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
const {
|
|
labels = [] as string[],
|
|
children,
|
|
}: { labels: string[]; children: Snippet<[number]> } = $props();
|
|
let active = $state(0);
|
|
|
|
function select(index: number) {
|
|
active = index;
|
|
}
|
|
</script>
|
|
|
|
<div class="tabs">
|
|
{#each labels as label, i}
|
|
<button class:selected={i === active} onclick={() => select(i)}>
|
|
{label}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
{#if labels.length > 0}
|
|
{@render children(active)}
|
|
{/if}
|
|
|
|
<style>
|
|
.tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tabs button {
|
|
flex: 1;
|
|
background: var(--surface-alt-color);
|
|
color: var(--text-color);
|
|
border: 2px solid var(--accent-color);
|
|
border-radius: 4px;
|
|
font-family: inherit;
|
|
font-size: 0.8rem;
|
|
padding: 0.4rem 0.2rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.tabs button.selected {
|
|
background: var(--accent-color);
|
|
color: var(--surface-color);
|
|
}
|
|
</style>
|