26 lines
873 B
Svelte
26 lines
873 B
Svelte
<script lang="ts">
|
|
import IconCheck from "~icons/tabler/check";
|
|
import IconX from "~icons/tabler/x";
|
|
import Button from "../ui/Button.svelte";
|
|
|
|
let {
|
|
label,
|
|
sublabel = "",
|
|
name,
|
|
checked,
|
|
options = ["Yes", "No"],
|
|
...others
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="flex gap-x-10 gap-y-3 flex-wrap mb-5 items-center">
|
|
<label for={name} class="block w-1/3 min-w-[300px]">
|
|
<p>{label}</p>
|
|
{#if sublabel.length > 0}
|
|
<p class="text-sm text-neutral-400 dark:text-neutral-600">{sublabel}</p>
|
|
{/if}
|
|
</label>
|
|
|
|
<input class="hidden" type="checkbox" id={name} name={name} defaultChecked={checked}/>
|
|
<Button Icon={checked ? IconCheck : IconX} type="button" inverted={!checked} {...others} onclick={() => checked = !checked}>{checked ? options[0] : options[1]}</Button>
|
|
</div> |