You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.1 KiB
38 lines
1.1 KiB
<script lang="ts"> |
|
interface Props { |
|
checked: boolean; |
|
onclick: () => void; |
|
disabled?: boolean; |
|
class?: string; |
|
} |
|
|
|
let { |
|
checked, |
|
onclick, |
|
disabled = false, |
|
class: className = "", |
|
}: Props = $props(); |
|
</script> |
|
|
|
<button |
|
{onclick} |
|
{disabled} |
|
class="w-8 h-8 cursor-pointer p-0 flex items-center justify-center border-4 border-black disabled:opacity-50 disabled:cursor-not-allowed {checked |
|
? 'bg-kv-yellow' |
|
: 'bg-white'} {className}" |
|
> |
|
{#if checked} |
|
<svg width="18" height="15" viewBox="0 0 18 15" fill="none"> |
|
<path |
|
d="M6 14.1L0 8.1L2.1 6L6 9.9L15.9 0L18 2.1L6 14.1Z" |
|
fill="black" |
|
/> |
|
</svg> |
|
{:else} |
|
<svg viewBox="0 0 24 24" fill="black" class="w-4 h-4"> |
|
<path |
|
d="M6.6188 19.4811L4.5188 17.3811L9.9188 11.9811L4.5188 6.61855L6.6188 4.51855L12.0188 9.91855L17.3813 4.51855L19.4813 6.61855L14.0813 11.9811L19.4813 17.3811L17.3813 19.4811L12.0188 14.0811L6.6188 19.4811Z" |
|
/> |
|
</svg> |
|
{/if} |
|
</button>
|
|
|