Enhance search input with icon

Author: user-lezi

docs/index.html

@@ -57,12 +57,18 @@
       <h1 class="text-2xl font-bold mb-4">ForgeExtensions</h1>
 
       <!-- Search -->
-      <input
-        id="search"
-        type="text"
-        placeholder="Search extensions..."
-        class="w-full px-4 py-2 rounded-lg bg-[#151821] border border-slate-800 focus:outline-none focus:border-slate-600 text-sm"
-      />
+      <div class="relative">
+        <i
+          class="bi bi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm pointer-events-none"
+        ></i>
+
+        <input
+          id="search"
+          type="text"
+          placeholder="Search extensions..."
+          class="w-full pl-9 pr-4 py-2 rounded-lg bg-[#151821] border border-slate-800 focus:outline-none focus:border-slate-600 focus:ring-1 focus:ring-slate-600 text-sm"
+        />
+      </div>
     </div>
 
     <!-- Extensions container -->
@@ -72,7 +78,9 @@ <h1 class="text-2xl font-bold mb-4">ForgeExtensions</h1>
     ></div>
     <footer class="text-center py-6 text-[0.7rem] text-slate-600">
       Try out
-      <a class="text-[rgb(var(--accent-code))] underline" href="https://github.com/ForjSkript"
+      <a
+        class="text-[rgb(var(--accent-code))] underline"
+        href="https://github.com/ForjSkript"
         >ForjSkript</a
       >
     </footer>