38 lines
1.0 KiB
Svelte
38 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import type { MouseEventHandler } from 'svelte/elements';
|
|
|
|
let {
|
|
name,
|
|
selected = false,
|
|
children,
|
|
onclick,
|
|
ontoggle
|
|
}: {
|
|
name?: string;
|
|
selected?: boolean;
|
|
children: Snippet;
|
|
onclick?: MouseEventHandler<HTMLButtonElement>;
|
|
ontoggle?: (selected: boolean) => void;
|
|
} = $props();
|
|
|
|
const handleToggleSelectClick: MouseEventHandler<HTMLButtonElement> = (event) => {
|
|
selected = !selected; // update state
|
|
ontoggle?.(selected); // send event to parent
|
|
onclick?.(event); // pass onclick handler through
|
|
};
|
|
</script>
|
|
|
|
{#if name}
|
|
<input type="hidden" value={selected} {name} />
|
|
{/if}
|
|
|
|
<button
|
|
class="rounded-3xl border px-6 py-2.5 font-medium transition-colors {selected
|
|
? 'border-secondary bg-primary text-background hover:bg-primary-600'
|
|
: 'border-accent text-text dark:border-accent/50 dark:bg-text dark:text-background dark:hover:bg-text-900 bg-white hover:bg-slate-100'}"
|
|
onclick={handleToggleSelectClick}
|
|
>
|
|
{@render children()}
|
|
</button>
|