Priority/frontend/src/routes/surfers/+page.svelte

<script>
	import Header from '$lib/header-setup.svelte';
	import Button from '$lib/button.svelte';
	import Select from '$lib/select.svelte';
	import Input from '$lib/input.svelte';
	import { categories } from '$lib/stores/categories.js';

	let surfer = {
		firstname: '',
		lastname: '',
		category: ''
	};

	$: value = '';

	function onclick() {
		alert('clicked');
	}
</script>

<Header title="Surfer Edit" />

<div class="form">
	<Input label="Firstame" id="firstname" bind:value={surfer.firstname} />
	<Input label="Lastname" id="lastname" bind:value={surfer.lastname} />
	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
</div>

<Button handleClick={onclick} title="SAVE"></Button>
<Button handleClick={onclick} title="Reset"></Button>

<hr />

<label for="surfer">{JSON.stringify(surfer)}</label>