File size: 488 Bytes
82fcab7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script lang="ts">
export let checked: boolean;
export let name: string;
</script>
<div
class="relative inline-flex h-5 w-9 items-center rounded-full p-1 shadow-inner transition-all {checked
? 'bg-black'
: 'bg-gray-300 hover:bg-gray-400'}"
>
<input
bind:checked
type="checkbox"
{name}
id={name}
class="peer absolute inset-0 cursor-pointer opacity-0"
/>
<div
class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all peer-checked:translate-x-3.5"
/>
</div>
|