✨ new components for radio and select
Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
parent
9aa16763c6
commit
7c3f87079b
3 changed files with 38 additions and 0 deletions
17
frontend/src/components/userform/UserFormInput.svelte
Normal file
17
frontend/src/components/userform/UserFormInput.svelte
Normal 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>
|
12
frontend/src/components/userform/inputs/RadioButtons.svelte
Normal file
12
frontend/src/components/userform/inputs/RadioButtons.svelte
Normal 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>
|
9
frontend/src/components/userform/inputs/Select.svelte
Normal file
9
frontend/src/components/userform/inputs/Select.svelte
Normal 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>
|
Reference in a new issue