Add search route page

src/pages/search.astro

@@ -1,54 +1,29 @@
 ---
-import Footer from "@components/Footer.astro";
-import Header from "@components/Header.astro";
 import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import Search from "@components/Search";
+import type { Frontmatter } from "@utils/types";
+
+localStorage.setItem("myCat", "Tom");
+
+// Retrieve all articles
+const posts = await Astro.glob<Frontmatter>("../contents/*.md");
+
+// List of items to search in
+const searchList = posts.map(({ frontmatter }) => ({
+  title: frontmatter.title,
+  description: frontmatter.description,
+  frontmatter,
+  slug: frontmatter.slug,
+}));
 ---
 
 <Layout title={`Search | ${import.meta.env.PUBLIC_SITE_TITLE}`}>
   <Header activeNav="search" />
   <Main pageTitle="Search" pageDesc="Search any article ...">
-    <label class="search-wrapper">
-      <span class="sr-only">Search</span>
-      <span class="search-icon">
-        <svg xmlns="http://www.w3.org/2000/svg"
-          ><path
-            d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
-          ></path>
-        </svg>
-      </span>
-      <input
-        class="search-input"
-        placeholder="Search for anything..."
-        type="text"
-        name="search"
-        autocomplete="off"
-      />
-    </label>
-    <!-- <ul>
-      {
-        sortedPosts.map(({ frontmatter }) => {
-          return (
-            <Card href={`/posts/${frontmatter.slug}`} post={frontmatter} />
-          );
-        })
-      }
-    </ul> -->
+    <Search client:load searchList={searchList} />
   </Main>
   <Footer />
 </Layout>
-
-<style>
-  .search-wrapper {
-    @apply relative block;
-  }
-  .search-icon {
-    @apply absolute inset-y-0 left-0 flex items-center pl-2 opacity-75;
-  }
-  .search-input {
-    @apply placeholder:italic placeholder:text-opacity-75 py-3 pl-10 pr-3 
-    block bg-skin-fill w-full rounded
-    border border-skin-fill border-opacity-40 
-    focus:outline-none focus:border-skin-fill;
-  }
-</style>