Create Search function for header search

src/components/global/Header.astro

@@ -28,9 +28,10 @@ import {
         </div>
         <div class="header-center">
             <form>
-                <input type="text" placeholder={t('header.search')}/>
+                <input type="search" placeholder={t('header.search')}/>
-                <button type="submit"><Search/></button>
+                <button onclick="Search()"><Search/></button>
             </form>
+            <!-- <div id="results"></div> -->
         </div>
         <div class="header-end">
             <Dropdown/>
@@ -38,6 +39,38 @@ import {
     </div>
 </header>
 
+<script is:inline>
+/*    
+@licstart  The following is the entire license notice for the 
+JavaScript code in this page.
+
+Copyright (C) 2024 SudoVanilla
+
+The JavaScript code in this page is free software: you can
+redistribute it and/or modify it under the terms of the GNU
+General Public License (GNU GPL) as published by the Free Software
+Foundation, either version 3 of the License, or (at your option)
+any later version.  The code is distributed WITHOUT ANY WARRANTY;
+without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+
+As additional permission under GNU GPL version 3 section 7, you
+may distribute non-source (e.g., minimized or compacted) forms of
+that code without the copy of the GNU GPL normally required by
+section 4, provided you include this license notice and a URL
+through which recipients can access the Corresponding Source.   
+
+
+@licend  The above is the entire license notice
+for the JavaScript code in this page.
+*/
+
+function Search() {
+    var SearchQuery = document.querySelector('input[type="search"]').value
+    location.href = `/search?q=${SearchQuery}`
+}
+</script>
+
 <style lang="scss">
 header {
     position: fixed;