20 lines
642 B
Svelte
20 lines
642 B
Svelte
<script>
|
|
let { options = [], value = $bindable(""), size = "default" } = $props();
|
|
</script>
|
|
|
|
<div class="inline-flex bg-bg-elevated rounded-[10px] p-[3px] gap-[2px]">
|
|
{#each options as option}
|
|
<button
|
|
class="rounded-lg font-medium
|
|
{size === 'small' ? 'px-2.5 py-1 text-[11px]' : 'px-3.5 py-[6px] text-[12px]'}
|
|
{value === option
|
|
? 'bg-accent text-bg shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
|
|
: 'text-text-secondary hover:text-text hover:bg-hover'}"
|
|
style="transition-duration: var(--duration-ui)"
|
|
onclick={() => value = option}
|
|
>
|
|
{option}
|
|
</button>
|
|
{/each}
|
|
</div>
|