💄 added svg to checked button

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2024-01-10 20:29:25 +01:00
parent a6929b34a8
commit 14c24ae97e
2 changed files with 24 additions and 1 deletions

View file

@ -1,5 +1,6 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import CheckMark from '../../svg/CheckMark.svelte';
const dispatch = createEventDispatcher();
function handleButtonClick(selectedValue: string) {
dispatch('update', selectedValue);
@ -11,7 +12,11 @@
<div class="flex justify-between w-full">
{#each options as data, index (data)}
<button name={data} on:click={() => handleButtonClick(data)} class="flex flex-col justify-start items-center w-12 text-center hover:cursor-pointer">
<div class={`${selected == data && "bg-primary"} h-6 w-6 rounded-full border-2 border-primary hover:bg-primary`}></div>
<div class={`${selected == data && "bg-primary"} flex justify-center items-center h-6 w-6 rounded-full border-2 border-primary hover:bg-primary`}>
{#if selected == data}
<CheckMark width=10/>
{/if}
</div>
<label class="text-primary text-sm mt-1 hover:cursor-pointer" for={data}>{data}</label>
</button>
{/each}