refac/fix: switch

This commit is contained in:
Timothy Jaeryang Baek 2025-10-04 02:00:10 -05:00
parent d40c710354
commit ce83276fa4

View file

@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher, tick, getContext } from 'svelte';
import { Switch } from 'bits-ui'; import { Switch } from 'bits-ui';
import { createEventDispatcher, tick, getContext } from 'svelte';
import { settings } from '$lib/stores'; import { settings } from '$lib/stores';
import Tooltip from './Tooltip.svelte'; import Tooltip from './Tooltip.svelte';
export let state = true; export let state = true;
export let id = ''; export let id = '';
@ -10,8 +12,6 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
$: dispatch('change', state);
</script> </script>
<Tooltip <Tooltip
@ -28,6 +28,10 @@
: 'outline outline-1 outline-gray-100 dark:outline-gray-800'} {state : 'outline outline-1 outline-gray-100 dark:outline-gray-800'} {state
? ' bg-emerald-500 dark:bg-emerald-700' ? ' bg-emerald-500 dark:bg-emerald-700'
: 'bg-gray-200 dark:bg-transparent'}" : 'bg-gray-200 dark:bg-transparent'}"
onCheckedChange={async () => {
await tick();
dispatch('change', state);
}}
> >
<Switch.Thumb <Switch.Thumb
class="pointer-events-none block size-3 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini " class="pointer-events-none block size-3 shrink-0 rounded-full bg-white transition-transform data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:shadow-mini "