sidski/helseveileder
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💄 added svg to checked button

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/components/svg/CheckMark.svelte Normal file
View file

@ -0,0 +1,18 @@
<script lang="ts">
export let width:string
</script>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width={width} height={width} viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--twemoji" preserveAspectRatio="xMidYMid meet" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<path fill="#ffffff" d="M34.459 1.375a2.999 2.999 0 0 0-4.149.884L13.5 28.17l-8.198-7.58a2.999 2.999 0 1 0-4.073 4.405l10.764 9.952s.309.266.452.359a2.999 2.999 0 0 0 4.15-.884L35.343 5.524a2.999 2.999 0 0 0-.884-4.149z"/>
</g>
</svg>

7
frontend/src/components/userform/inputs/RadioButtons.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import CheckMark from '../../svg/CheckMark.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function handleButtonClick(selectedValue: string) { function handleButtonClick(selectedValue: string) {
dispatch('update', selectedValue); dispatch('update', selectedValue);
@ -11,7 +12,11 @@
<div class="flex justify-between w-full"> <div class="flex justify-between w-full">
{#each options as data, index (data)} {#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"> <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> <label class="text-primary text-sm mt-1 hover:cursor-pointer" for={data}>{data}</label>
</button> </button>
{/each} {/each}