Change input on Index.astro to Input component, add defaultStyles prop.

src/components/UI/Input.astro

@@ -1,11 +1,13 @@
 ---
-const { inputName, defaultTextContent, height, placeholder } = Astro.props;
+const { inputName, defaultTextContent, height, placeholder, className, defaultStyles = true } = Astro.props;
 
 interface Props {
   inputName: string;
   defaultTextContent?: string;
   height: string;
   placeholder?: string;
+  className?: string;
+  defaultStyles?: boolean;
 }
 ---
 
@@ -15,23 +17,27 @@ interface Props {
   placeholder={placeholder || ""}
   value={defaultTextContent || ""}
   type="text"
+  class={className}
 />
 
-<style>
+{defaultStyles && <style>
-  input {
+    input {
-    font-size: 16px;
+      font-size: 16px;
-    width: 100%;
+      width: 100%;
-    border: 2px solid var(--background-highlight);
+      border: 2px solid var(--background-highlight);
-    border-radius: 10px;
+      border-radius: 10px;
-    background-color: var(--accent-color);
+      background-color: var(--accent-color);
-    color: var(--text-color);
+      color: var(--text-color);
-    transition: 0.1s ease-in-out;
+      transition: 0.1s ease-in-out;
-  }
+    }
-  input::placeholder {
+    input::placeholder {
-    color: var(--text-color);
+      color: var(--text-color);
-  }
+    }
-  input:focus {
+    input:focus {
-    outline: none;
+      outline: none;
-    border: 2px solid var(--text-color);
+      border: 2px solid var(--text-color);
-  }
+    }
-</style>
+  </style>
+}
+
+

src/pages/[lang]/index.astro

@@ -4,6 +4,7 @@ import Layout from "../../layouts/Layout.astro";
 import { STATIC_PATHS, i18n } from "@i18n/utils";
 import Link from "@components/UI/Link.astro";
 import ProxyRegistrar from "@components/ProxyRegistrar.astro";
+import Input from "@components/UI/Input.astro";
 const t = i18n.inferLangUseTranslations(Astro.url);
 
 export function getStaticPaths() {
@@ -16,12 +17,12 @@ export function getStaticPaths() {
     <h1 class="title-text">{t("menu.welcome")}</h1>
     <div class="form-wrapper">
       <form class="url-input-form" id="url-input-form">
-        <input
+        <Input
-          class="url-input"
+          className="url-input"
-          id="url-input"
+          inputName="url-input"
-          type="text"
+          height="50px"
           placeholder={t("menu.search")}
-          autocomplete="off"
+          defaultStyles={false}
         />
         <div id="search-suggestions"></div>
         <div id="loading-content">Loading...</div>
@@ -145,7 +146,7 @@ export function getStaticPaths() {
   addEventListeners();
 </script>
 
-<style>
+<style is:global>
   .main-content {
     width: 100%;
     margin-top: 50px;