init

lib/components/dashboard/elements/Toggle.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export let id: string | undefined = undefined;
+  export let name: string | undefined = undefined;
+  export let checked: boolean = false;
+</script>
+
+<label class="h-fit relative inline-flex items-center cursor-pointer">
+  <input
+    {id}
+    {name}
+    {checked}
+    type="checkbox"
+    value="true"
+    class="sr-only peer"
+    on:change={(e) => {
+      e.currentTarget.value = e.currentTarget.checked ? 'true' : 'false';
+    }} />
+  <div
+    class="w-11 h-6 bg-button-secondary-active-solid hover:bg-button-secondary-selected peer-checked:hover:bg-accent-hover peer-checked:bg-accent rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-icon-active after:rounded-full after:h-5 after:w-5 after:transition-all transition-colors" />
+</label>