From e4035a3089dd0dd44e0d456d0c9ab367b722f969 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 25 Oct 2024 14:50:58 -0400
Subject: [PATCH] Make search box it's own componet, update scripts

---
 source/src/components/global/Header.astro    | 69 ++++++++++----------
 source/src/components/global/SearchBox.astro | 39 +++++++++++
 2 files changed, 73 insertions(+), 35 deletions(-)
 create mode 100644 source/src/components/global/SearchBox.astro

diff --git a/source/src/components/global/Header.astro b/source/src/components/global/Header.astro
index 8848cdf..0e68924 100644
--- a/source/src/components/global/Header.astro
+++ b/source/src/components/global/Header.astro
@@ -2,24 +2,41 @@
 // Properties
 const {Query, QueryText} = Astro.props
 
+// Components
+import SearchBox from "./SearchBox.astro";
+
 // Icons
-import { HalfMoon, Menu } from "@iconoir/vue";
+import { HalfMoon, Menu, SunLight } from "@iconoir/vue";
 ---
 
 <header>
     <div class="header-start">
         <a href="/"><img width="18px" src="https://md.sudovanilla.org/images/Union.png"/></a>
-        <form class="search-box" onsubmit="return Search()">
-            <input type="search" value={QueryText} placeholder="Search" />
-        </form>
+        <SearchBox/>
     </div>
     <div class="header-end">
         <button>English</button>
-        <button title="Toggle Theme" class="button-icon"><HalfMoon /></button>
+        <button onclick="ThemeToggle()" title="Toggle Theme" class="button-icon">
+            <SunLight class:list={'theme-light'}/>
+            <HalfMoon class:list={'theme-dark'}/>
+        </button>
         <button title="Options" class="button-icon" data-tooltip-placement="right"><Menu /></button>
     </div>
 </header>
 
+
+<script is:inline>
+function ThemeToggle() {
+    if (document.body.getAttribute('class') === 'dark') {
+        document.body.setAttribute('class', 'light')
+        document.cookie = "Theme=Light"; 
+    } else if (document.body.getAttribute('class') === 'light') {
+        document.body.setAttribute('class', 'dark')
+        document.cookie = "Theme=Dark"; 
+    }
+}
+</script>
+
 <style lang="scss">
 header {
     padding: 16px 0px;
@@ -39,9 +56,10 @@ header {
             border-radius: 3rem;
             border: 1px white solid;
             padding: 0px 12px;
-            background: white;
+            background: var(--box-background);
             border: 1px rgb(192, 192, 192) solid;
             cursor: pointer;
+            color: var(--text);
         }
         .button-icon {
             aspect-ratio: 1;
@@ -52,36 +70,13 @@ header {
             }
         }
     }
-    .search-box {
-        background: white;
-        border: 1px rgb(192, 192, 192) solid;
-        border-radius: 3rem;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 16px 8px;
-        position: relative;
-        max-width: 500px;
-        width: 300px;
-        input {
-            position: absolute;
-            top: 0px;
-            left: 0px;
-            width: 100%;
-            height: 100%;
-            border-radius: 3rem;
-            border: none;
-            background: transparent;
-            padding: 0px 12px;
-        }
-    }
 }
 </style>
 
 <!-- Search Scripts -->
 <!-- From https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/master/source/src/components/Search.astro#L18-L94 as of writing -->
-<script is:inline>
-    /*    
+<script>
+/*
 @licstart  The following is the entire license notice for the 
 JavaScript code in this page.
 
@@ -111,9 +106,13 @@ function FocusSearch() {
     document.querySelector('input[type="search"]').focus();
 }
 
+// The "Search()" function does not work for Zarro, an API request
+// will be made to an endpoint instead with a redirect parameter.
+// Learn More: https://docs.astro.build/en/guides/endpoints/#redirects
+
 // Trigger Search
-function Search() {
-    var SearchQuery = document.querySelector('form > input[type="search"]').value;
-    location.href = `/web?=${SearchQuery}`;
-}
+// function Search() {
+//     var SearchQuery = document.querySelector('form > input[type="search"]').value;
+//     location.href = `/web?=${SearchQuery}`;
+// }
 </script>
\ No newline at end of file
diff --git a/source/src/components/global/SearchBox.astro b/source/src/components/global/SearchBox.astro
new file mode 100644
index 0000000..114d14d
--- /dev/null
+++ b/source/src/components/global/SearchBox.astro
@@ -0,0 +1,39 @@
+---
+// Properties
+const {Query, QueryText} = Astro.props
+---
+
+<form class="search-box" action="/api/search/web" method="post">
+    <input name="websearch" value={QueryText} placeholder="Search"/>
+</form>
+
+<style lang="scss">
+.search-box {
+    background: var(--box-background);
+    border: 1px rgb(192, 192, 192) solid;
+    border-radius: 3rem;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 16px 8px;
+    position: relative;
+    max-width: 500px;
+    width: 300px;
+    input {
+        color: var(--text);
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: calc(100% - 24px);
+        height: 28px;
+        border-radius: 3rem;
+        border: none;
+        background: transparent;
+        padding: 0px 12px;
+        border: 1px transparent solid;
+        &:focus {
+            outline: none;
+        }
+    }
+}
+</style>
\ No newline at end of file