💄 added svg to checked button
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
parent
a6929b34a8
commit
14c24ae97e
2 changed files with 24 additions and 1 deletions
|
|
@ -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}
|
||||
|
|
|
|||
Reference in a new issue