30 lines
671 B
Svelte
30 lines
671 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte'
|
|
|
|
const {
|
|
onclick,
|
|
children: content,
|
|
selected = $bindable(),
|
|
}: {
|
|
onclick?: () => void
|
|
children?: Snippet
|
|
selected?: boolean
|
|
} = $props()
|
|
</script>
|
|
|
|
<button
|
|
onclick={() => onclick?.()}
|
|
class:selected
|
|
class="cursor-pointer px-6 py-3 border-2 rounded-lg transition-all border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 dark:text-gray-300"
|
|
>
|
|
{@render content?.()}
|
|
</button>
|
|
|
|
<style>
|
|
@reference "../../../../app.css";
|
|
|
|
.selected {
|
|
@apply border-blue-600 bg-blue-50 dark:border-blue-500 dark:text-white dark:bg-blue-950;
|
|
}
|
|
</style>
|