split the search bar into its own component

4 files changed, 34 insertions, 26 deletions

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index b35a9a7..825b4f3 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
+	import SearchUser from './SearchUser.svelte'
 
 	export let backArrowHref = '/'
 	let searchUserValue = ''
@@ -11,28 +12,9 @@
 			<path d="M 14 0 l -13 13 l 13 13" stroke-width="2" fill="none" />
 		</svg>
 	</a>
-	<form
-		action="/player"
-		method="post"
-		class="user-form"
-		on:submit={e => {
-			goto(`/player/${searchUserValue}`)
-			e.preventDefault()
-		}}
-	>
-		<input
-			class="enter-username-input"
-			type="text"
-			placeholder="Enter username"
-			name="user-search"
-			autocomplete="off"
-			autocorrect="off"
-			autocapitalize="off"
-			spellcheck="false"
-			aria-label="Enter username"
-			bind:value={searchUserValue}
-		/>
-	</form>
+	<span class="username-input-container">
+		<SearchUser bind:value={searchUserValue} />
+	</span>
 </header>
 
 <style>
@@ -42,16 +24,14 @@
 		padding: 0.5rem 10%;
 	}
 
-	.user-form {
+	.username-input-container {
 		display: inline-block;
 		text-align: center;
 		font-size: 1.25rem;
 		/* center the forms */
 		margin: 0 auto;
 		width: max-content;
-	}
 
-	.enter-username-input {
 		box-shadow: none;
 		/* add a slight shadow on the form in the index page */
 		max-width: calc(90vw - 8em);
diff --git a/src/lib/SearchUser.svelte b/src/lib/SearchUser.svelte
new file mode 100644
index 0000000..3c841ce
--- /dev/null
+++ b/src/lib/SearchUser.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+
+	export let value = ''
+</script>
+
+<form
+	action="/player"
+	method="post"
+	class="user-form"
+	on:submit={e => {
+		goto(`/player/${value}`)
+		e.preventDefault()
+	}}
+>
+	<input
+		type="text"
+		placeholder="Enter username"
+		name="user-search"
+		autocomplete="off"
+		autocorrect="off"
+		autocapitalize="off"
+		spellcheck="false"
+		aria-label="Enter username"
+		bind:value
+	/>
+</form>
diff --git a/src/lib/minecraft/heads/Head3d.svelte b/src/lib/minecraft/heads/Head3d.svelte
index 2400f4b..3dd3234 100644
--- a/src/lib/minecraft/heads/Head3d.svelte
+++ b/src/lib/minecraft/heads/Head3d.svelte
@@ -17,6 +17,7 @@
 	}
 
 	.head3d {
+		display: inline-block;
 		/* make the head centered correctly */
 		position: relative;
 		top: 0.2em;
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 9bfbd29..b90528a 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <svelte:head>
-	<title>Home</title>
+	<title>SkyBlock Stats</title>
 </svelte:head>
 
 <Header />