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

🎨 add ButtonComponent

Browse source 
Co-authored-by: haraldnilsen <harald_998@hotmail.com>
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2023-12-12 19:58:52 +01:00
parent 09e4ae70d9
commit d0bfa5bb79
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
3 changed files with 22 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/ButtonComponent.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
export let text;
export let url;
export let filled = false;
let style;
if (!filled) {
style = "text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg";
} else {
style = "bg-primary text-bg font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-bg hover:text-primary";
}
</script>
<button class={style}><a href={url}>{text}</a></button>

6
frontend/src/routes/+page.svelte
View file

@ -1,3 +1,7 @@
<script>
import ButtonComponent from "../components/ButtonComponent.svelte";
</script>
<div class="flex flex-col justify-between items-center h-full">
<div class="flex h-full items-center">
<div class="flex flex-col w-3/5 gap-4 px-32">
@ -12,7 +16,7 @@
</ul>
</div>
<div class="flex justify-center items-center w-2/5">
<button class="text-primary font-bold uppercase border-primary border-2 rounded-full px-8 py-3 hover:bg-primary hover:text-bg"><a href="/form">Start undersøkelse</a></button>
<ButtonComponent text="Start undersøkelse" url="/userform" filled={false} />
</div>
</div>
<div class="flex justify-center items-center gap-8 text-primary font-bold">

3
frontend/src/routes/userform/+page.svelte
View file

@ -1,6 +1,7 @@
<script>
import UserFormInput from "../../components/userform/UserFormInput.svelte";
import ArrowBack from "../../components/svg/ArrowBack.svelte";
import ButtonComponent from "../../components/ButtonComponent.svelte";
</script>
<div class="flex flex-col justify-center gap-20 h-full ">
@ -22,7 +23,7 @@
</div>
</div>
<div class="flex justify-center items-center gap-8 text-primary font-bold">
<button class="font-bold uppercase border-primary border-2 rounded-xl px-8 py-3 bg-primary text-bg text-xs"><a href="/form">Start undersøkelse</a></button>
<ButtonComponent text="Start undersøkelse" url="/form" filled={true} />
</div>
</div>