src/lib/components/Toggle.svelte

<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>