From c213cfa8ba8371537b9124d0d792b9eb9b2bf5f6 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Mon, 21 Nov 2022 12:57:33 +0100
Subject: [PATCH] feat: add icon to textfield

---
 .../lib/components/textfield/TextField.svelte | 36 ++++++++++++-------
 frontend/src/routes/register/+page.svelte     | 13 +++++--
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/textfield/TextField.svelte b/frontend/src/lib/components/textfield/TextField.svelte
index 3daa00e..078b751 100644
--- a/frontend/src/lib/components/textfield/TextField.svelte
+++ b/frontend/src/lib/components/textfield/TextField.svelte
@@ -2,21 +2,33 @@
 	export let type: 'text' | 'number' | 'tel' | 'e-mail' = 'text';
 	const typeAction = (node: HTMLInputElement) => {
 		node.type = type;
-	}
+	};
 	export let placeholder: string = '';
 	export let value: string = '';
+
+	export let icon: boolean = false;
 </script>
 
-<input
-	bind:value
-	on:click
-	on:keydown
-	on:keyup
-	class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-	use:typeAction
-	{placeholder}
-/>
+<div class="mt-8 relative flex justify-center items-center">
+	<input
+		bind:value
+		on:click
+		on:keydown
+		on:keyup
+		class:withIcon={icon}
+		class="bg-[#f8fafb] w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
+		use:typeAction
+		{placeholder}
+	/>
+	{#if icon}
+		<span class="flex absolute right-0 top-0 bottom-0 my-auto bg-transparent p-3">
+			<slot name="icon" />
+		</span>
+	{/if}
+</div>
 
 <style>
-    
-</style>
\ No newline at end of file
+	.withIcon {
+		@apply pr-14;
+	}
+</style>
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index 81eb3a9..f3602c7 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/frontend/src/routes/register/+page.svelte
@@ -14,7 +14,7 @@
 		}
 	};
 
-	let pageIndex = 3;
+	let pageIndex = 0;
 </script>
 
 <SplitLayout>
@@ -31,7 +31,10 @@
 			</p>
 			<div class="flex md:flex-col items-center justify-center w-full md:w-3/5">
 				<TextField type="text" placeholder="Jméno a příjmení" />
-				<TextField type="e-mail" placeholder="Email" />
+				<TextField type="e-mail" placeholder="Email" icon>
+					<div slot="icon" class="flex items-center justify-centertext-center text-2xl text-sspsBlue pb-1" 
+					>@</div>
+				</TextField>
 			</div>
 			<div class="w-full md:w-3/5">
 				<TextField type="tel" placeholder="Telefon" />
@@ -89,7 +92,11 @@
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
 			<div class="flex flex-col w-full md:w-3/5">
-				<TextField type="text" placeholder="Občanství" />
+				<TextField type="text" placeholder="Občanství"  icon>
+					<div slot="icon">
+						ssj
+					</div>
+				</TextField>
 			</div>
 			<div class="flex items-center justify-center w-full md:w-3/5">
 				<TextField type="text" placeholder="Rodné číslo" />