wip

src/lib/components/ui/button/toggleButton.svelte

@@ -0,0 +1,29 @@
+<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>