refactor(tools): input template

1 files changed, 51 insertions, 0 deletions

diff --git a/src/lib/Tools/InputTemplate.svelte b/src/lib/Tools/InputTemplate.svelte
new file mode 100644
index 00000000..16b4ec8f
--- /dev/null
+++ b/src/lib/Tools/InputTemplate.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { clearAllParameters } from '$lib/Utility/parameters';
+	import { onMount } from 'svelte';
+
+	export let field: string;
+	export let submission: string;
+	export let event: string;
+	export let submitText: string;
+	export let saveParameters: string[] = [];
+	export let onSubmit = () => {
+		return;
+	};
+	export let prompt = `Enter a ${field.toLowerCase()} to search for to continue.`;
+
+	let input = '';
+
+	onMount(() => clearAllParameters(saveParameters));
+</script>
+
+<div class="card">
+	<p>
+		<input
+			type="text"
+			placeholder={field}
+			bind:value={input}
+			on:keypress={(e) => {
+				if (e.key === 'Enter') {
+					submission = input;
+
+					onSubmit();
+				}
+			}}
+		/>
+		<button
+			class="button-lined"
+			on:click={() => (submission = input)}
+			title="Or click your Enter key"
+			data-umami-event={event}
+		>
+			{submitText}
+		</button>
+	</p>
+
+	{#if submission !== ''}
+		<slot />
+	{:else}
+		<p />
+
+		{prompt}
+	{/if}
+</div>