new components for radio and select

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
haraldnilsen 2023-12-12 19:38:41 +01:00
parent 9aa16763c6
commit 7c3f87079b
3 changed files with 38 additions and 0 deletions

View file

@ -0,0 +1,17 @@
<script lang="ts">
export let inputType:string
export let label:string
export let options: string[]
import RadioButtons from "./inputs/RadioButtons.svelte"
import Select from "./inputs/Select.svelte";
</script>
<div class="flex justify-start items-center h-1/4 w-full ">
<p class="text-primary font-bold">{label}:</p>
{#if inputType == "radio"}
<RadioButtons options={options}/>
{/if}
{#if inputType == "select"}
<Select options={options}/>
{/if}
</div>

View file

@ -0,0 +1,12 @@
<script lang="ts">
export let options:string[]
</script>
<div class="flex justify-between">
{#each options as data, index (data)}
<div class="flex flex-col justify-center items-center w-24 ">
<button name={data} class="h-7 w-7 rounded-full border-2 border-primary hover:bg-primary"></button>
<label class="text-primary text-sm mt-1" for={data}>{data}</label>
</div>
{/each}
</div>

View file

@ -0,0 +1,9 @@
<script lang="ts">
export let options:string[]
</script>
<select class="ml-6 pl-2 pr-16 py-2 rounded-xl text-primary border-primary border-2 text-start hover:cursor-pointer ">
{#each options as data, index (data)}
<option id={data}>{data}</option>
{/each}
</select>