From 18a31b769ad2c7de6ff0749100ebd79200267121 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 27 Jul 2021 16:22:17 -0700
Subject: [PATCH] Created fancy customizable input field.

---
 src/lib/Field.svelte    | 40 ++++++++++++++++++++++++++++++++++++++++
 src/routes/index.svelte |  5 +++++
 2 files changed, 45 insertions(+)
 create mode 100644 src/lib/Field.svelte

diff --git a/src/lib/Field.svelte b/src/lib/Field.svelte
new file mode 100644
index 0000000..0ff798f
--- /dev/null
+++ b/src/lib/Field.svelte
@@ -0,0 +1,40 @@
+<script>
+	export let label = '';
+	export let insrustions = '';
+	export let style = '';
+	export let value;
+	export let placeholder;
+	export let type = 'text';
+
+	function handleInput(e) {
+		value = type.match(/^(number|range)$/) ? +e.target.value : e.target.value;
+	}
+</script>
+
+<div {style}>
+	<label>
+		{#if label}
+			<span>
+				{label}
+			</span>
+			<br />
+		{/if}
+		{#if insrustions}
+			<span class="instructions">
+				{insrustions}
+			</span>
+			<br />
+		{/if}
+		<input on:input={handleInput} {type} {value} {placeholder} />
+	</label>
+</div>
+
+<style>
+	div {
+		margin-bottom: 1rem;
+	}
+	.instructions {
+		opacity: 0.7;
+		font-size: var(--instructionsFontSize, 14px);
+	}
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 9a6357e..0155ee0 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,5 +1,6 @@
 <script>
 	import SearchFilter from '$lib/SearchFilter.svelte';
+	import Field from '$lib/Field.svelte';
 	// import BetterAccordion from '$lib/BetterAccordion.svelte';
 	// import Toggle from '$lib/Toggle.svelte';
 	let isToggled = false;
@@ -9,6 +10,10 @@
 
 <h1>Welcome to Level Up UI {search}</h1>
 
+<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
+
+<Field value={0} label="Number" type="number" />
+
 <SearchFilter {items} bind:search />
 
 <!-- <BetterAccordion isOpen={false} buttonText="Do I need a credit card??">