Update styles

package.json

@@ -27,6 +27,7 @@
     "astro-emoji": "^1.2.0",
     "astro-icon": "^1.1.5",
     "astro-seo": "^0.8.4",
+    "fuse.js": "^7.0.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/components/SearchBar.astro

@@ -0,0 +1,8 @@
+---
+import Search from './ui/Search'
+import { getCollection } from 'astro:content'
+
+const allNotes = await getCollection('notes')
+---
+
+<Search client:load searchList={allNotes} />

src/components/ui/Search.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import Fuse from 'fuse.js'
+import NoteItem from '../ui/NoteItem'
+
+export default function Search({ searchList }) {
+  const [query, setQuery] = useState('')
+
+  const options = {
+    keys: ['data.title'],
+    includeMatches: true,
+    minMatchCharLength: 2,
+    threshold: 0.5
+  }
+  const fuse = new Fuse(searchList, options)
+
+  const notes = fuse
+    .search(query)
+    .map((result) => result.item)
+    .slice(0, 5)
+
+  function handleOnSearch({ target = {} }) {
+    const { value } = target
+    setQuery(value)
+  }
+
+  return (
+    <>
+      <div class="flex flex-col">
+        <input 
+          type="text" 
+          value={query} 
+          onChange={handleOnSearch} 
+          placeholder="Search notes" 
+          class="px-2 py-2"
+        />
+      </div>
+      {query.length > 1 && (
+        <div class="my-5">
+          <div>Found {notes.length} {notes.length === 1 ? 'result' : 'results'} for '{query}'</div>
+        </div>
+      )}
+      <ul>
+        {notes &&
+          notes.map((note) => (
+            <NoteItem note={note} />
+          ))}
+      </ul>
+    </>
+  )
+}

src/pages/search.astro

@@ -0,0 +1,19 @@
+---
+import Main from '../layouts/Main.astro'
+import { getCollection } from 'astro:content'
+import SearchBar from '../components/SearchBar.astro'
+
+const allNotes = await getCollection('notes')
+allNotes.sort((a, b) => Date.parse(b.data.pubDate) - Date.parse(a.data.pubDate))
+---
+
+<Main 
+  PageName="Home"
+  TabTitle="Home",
+  MetaTitle="Derek Brown", 
+  MetaDescription="Developer profile, portfolio and website of Derek Brown.", 
+  MetaTag="website", 
+  MetaUrl="https://derekbrown.io"
+>
+  <SearchBar />
+</Main>