Spaces:
Running
Running
File size: 1,771 Bytes
de2d4cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script lang="ts">
import Icon from '@iconify/svelte';
export let label: string;
export let checked: boolean;
export let tooltip: string | undefined = undefined;
export let onChange: (c: boolean) => void;
</script>
<div class="w-full flex items-center justify-between gap-2.5 relative">
<div class="flex items-center justify-start gap-2">
{#if tooltip}
<div class="group cursor-pointer">
<Icon icon="lucide:info" class="text-slate-500 group-hover:text-slate-300 text-xl" />
<div class="bg-slate-950/90 z-10 min-w-[200px] rounded-xl p-3 text-white absolute text-xs left-0 bottom-0 translate-y-[calc(100%+8px)] opacity-0 transition-all duration-200 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto leading-relaxed">
{tooltip}
</div>
</div>
{/if}
<p class="font-sans text-slate-400 font-regular text-sm">
{label}
</p>
</div>
<div class="w-[62px] h-[32px] rounded-md relative cursor-pointer grid grid-cols-2 border border-slate-800 bg-slate-900/60 focus:bg-slate-900/90 focus:border-slate-700/80 overflow-hidden z-[1]">
<div class={`bg-slate-800/70 h-full w-[31px] absolute top-0 left-0 transition-all duration-150 z-[-1] ${!checked && 'translate-x-[31px]'}`}/>
<button
class="flex items-center justify-center"
class:text-slate-600={!checked}
on:click={() => onChange(true)}
>
<Icon icon="ic:round-check" class={`w-4 h-4 ${checked && 'text-green-500'}`} />
</button>
<button
class="flex items-center justify-center"
class:text-slate-600={checked}
on:click={() => onChange(false)}
>
<Icon icon="ic:round-close" class={`w-4 h-4 ${!checked && 'text-red-500'}`} />
</button>
</div>
</div> |