From eacc1d39bf0aab76f0bea6c3068a63558e58335d Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Sun, 4 Dec 2022 12:59:42 +0100
Subject: [PATCH] feat: add select field

---
 .../src/lib/components/SelectField.svelte     | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 frontend/src/lib/components/SelectField.svelte

diff --git a/frontend/src/lib/components/SelectField.svelte b/frontend/src/lib/components/SelectField.svelte
new file mode 100644
index 0000000..ec9c70b
--- /dev/null
+++ b/frontend/src/lib/components/SelectField.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	export let placeholder: string = '';
+	export let value: string = '';
+
+	export let error: string = '';
+
+	export let options: Array<string> = [];
+</script>
+
+<div>
+	<select class:error bind:value on:click on:keydown on:keyup on:change {placeholder} class:placeholder={!value}>
+		{#if placeholder}
+			<option value="" disabled selected>{placeholder}</option>
+		{/if}
+		{#each options as option}
+			<option value={option}>{option}</option>
+		{/each}
+	</select>
+</div>
+
+<style>
+	div,
+	input {
+		@apply w-full;
+	}
+	div {
+		@apply relative flex items-center justify-center;
+	}
+
+	select {
+		@apply hover:border-sspsBlue w-full rounded-lg border border-2 bg-[#f8fafb] p-3 text-xl shadow-lg outline-none transition-colors  duration-300;
+		@apply min-w-40;
+		text-align-last: center;
+	}
+	option {
+		@apply w-full;
+		@apply text-center;
+	}
+	.placeholder {
+		@apply text-gray-400;
+	}
+	.error {
+		@apply border-red-700;
+	}
+</style>