refac: styling

2024-05-15 16:42:55 -10:00
parent de0f31680c
commit e6d20df463
7 changed files with 73 additions and 40 deletions
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { createEventDispatcher, tick } from 'svelte';
+	import { Switch } from 'bits-ui';
+	export let state = true;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<Switch.Root
+	bind:checked={state}
+	onCheckedChange={async (e) => {
+		await tick();
+		dispatch('change', e);
+	}}
+	class="flex h-5 min-h-5 w-9 shrink-0 cursor-pointer items-center rounded-full px-[3px] transition  {state
+		? ' bg-emerald-600'
+		: 'bg-gray-200 dark:bg-transparent'}  outline outline-gray-100 dark:outline-gray-800"
+>
+	<Switch.Thumb
+		class="pointer-events-none block size-4 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini "
+	/>
+</Switch.Root>