Add generalized text field

src/lib/component/IconButton.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Icon from 'svelte-icons-pack/Icon.svelte';
+
+  export let src: string | { a: { viewBox: string }; c: string } | undefined;
+  export let color: string | undefined;
+  export let size: string | undefined;
+  export let onClick: Function | undefined = undefined;
+  export let type: "button" | "submit" | "reset" | null | undefined = "button"
+
+</script>
+
+<button class="flex" on:click={() => onClick && onClick()} type={type}>
+    <Icon {src} {color} {size} />
+</button>

src/lib/component/Icons.ts

@@ -7,6 +7,7 @@ import FaBrandsLinkedin from 'svelte-icons-pack/fa/FaBrandsLinkedin';
 import FaSolidUser from 'svelte-icons-pack/fa/FaSolidUser';
 import FaBars from 'svelte-icons-pack/fa/FaSolidBars';
 import FaTimes from 'svelte-icons-pack/fa/FaSolidTimes';
+import AiOutlineSearch from "svelte-icons-pack/ai/AiOutlineSearch";
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -17,7 +18,12 @@ const Icons = {
   Linkedin: FaBrandsLinkedin,
   User: FaSolidUser,
   Bars: FaBars,
-  Times: FaTimes
+  Times: FaTimes,
+  Search: AiOutlineSearch
 };
 
+type Keys = keyof typeof Icons;
+export type IconsType = typeof Icons[Keys];
+
+
 export default Icons;

src/lib/component/input/TextField.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import Icon from "$lib/component/Icon.svelte";
+    import IconButton from "$lib/component/IconButton.svelte";
+    import type { IconsType } from "../Icons";
+
+    export let name: string;
+    export let placeholder: string;
+    export let value: string;
+    export let beforeIcon: IconOptions | undefined = undefined
+    export let afterIcon: IconOptions | undefined = undefined
+</script>
+
+<script lang="ts" context="module">
+    export type IconOptions = {
+        button: boolean
+        type: "button" | "submit" | "reset"
+        onClick?: Function
+        icon: IconsType
+    };
+</script>
+
+<div class="m-2 flex text-xl text-white focus-within:outline-none focus-within:ring focus-within:ring-tertiary px-2 rounded-lg bg-stone-400/25">
+    {#if beforeIcon }
+        <span class="p-1">
+            {#if beforeIcon.button}
+                <IconButton
+                    src={beforeIcon.icon}
+                    color="white"
+                    size="24px"
+                    onClick={beforeIcon.onClick}
+                    type={beforeIcon.type}
+                /> 
+            {:else}
+                <Icon
+                    src={beforeIcon.icon}
+                    color="white"
+                    size="24px"
+                />
+            {/if}
+        </span>
+    {/if}
+    <input
+        class="appearance-none focus:outline-none bg-transparent"
+        type="text"
+        name={name}
+        placeholder={placeholder}
+
+        bind:value={value}
+    />
+
+    {#if afterIcon }
+        <span class="p-1">
+            {#if afterIcon.button}
+                <IconButton
+                    src={afterIcon.icon}
+                    color="white"
+                    size="24px"
+                    onClick={afterIcon.onClick}
+                    type={afterIcon.type}
+                /> 
+            {:else}
+                <Icon
+                    src={afterIcon.icon}
+                    color="white"
+                    size="24px"
+                />
+            {/if}
+        </span>
+    {/if}
+</div>

src/routes/events/+page.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-    import Title from "$lib/component/Title.svelte";
+    import Icons from "$lib/component/Icons";
+  import TextField from "$lib/component/input/TextField.svelte";
+  import Title from "$lib/component/Title.svelte";
 
-  export let data: { info: string };
-  let logoutMessage = '';
-
-  async function logout() {
-    const response = await fetch('/api/auth/logout', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    logoutMessage = response.ok ? 'Logout successful' : 'Logout failed';
+  const searchEvents = (e: SubmitEvent) => {
+    console.log(new FormData(e.target as HTMLFormElement))
   }
+
 </script>
 
 <div class="my-20">
     <div class="flex justify-center">
         <Title title="Eventos" />
     </div>
+
+    <form class="flex flex-wrap justify-around mt-10" on:submit={searchEvents}>
+        <TextField
+            beforeIcon={{button: true, icon: Icons.Search, type: "submit"}}
+            name="search"
+            placeholder="Search"
+            value=""
+        />
+    </form>
 </div>