43 lines
921 B
Svelte
43 lines
921 B
Svelte
<script lang="ts">
|
|
let {
|
|
value,
|
|
annotations,
|
|
selected,
|
|
disabled,
|
|
onclick
|
|
}: {
|
|
value: number;
|
|
annotations: number[];
|
|
selected: boolean;
|
|
disabled: boolean;
|
|
onclick: () => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<button
|
|
class="aspect-square rounded-4xl border border-gray-200 {selected
|
|
? 'bg-primary-500 dark:bg-primary-500'
|
|
: ''} {disabled ? 'bg-gray-200 dark:bg-gray-400' : ''}"
|
|
class:bg-gray-200={disabled}
|
|
class:cursor-pointer={!disabled}
|
|
{onclick}
|
|
{disabled}
|
|
>
|
|
<div class="flex items-center justify-center">
|
|
{#if value}
|
|
<div>{value || ' '}</div>
|
|
{:else}
|
|
<div class="flex flex-wrap justify-center space-y-2 space-x-2 md:flex-col">
|
|
{#each annotations as nb (nb)}
|
|
<div
|
|
class="bg-secondary-300 flex h-9 w-9 items-center justify-center rounded-full p-1 text-black"
|
|
class:bg-white={selected}
|
|
>
|
|
{nb}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</button>
|