feat : add fuzzy matching for searching

components/public/structured-directory.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { searchItems } from "@/lib/search";
+import { SearchNotice } from "@/components/search-notice";
+
 import Image from "next/image";
 import Link from "next/link";
 import { SearchIcon, UsersIcon } from "lucide-react";
@@ -39,10 +42,10 @@ type GuideCard = {
 export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
   const [query, setQuery] = useState("");
   const presence = useVisitorPresence(null);
-  const normalized = query.trim().toLowerCase();
-  const filtered = guides.filter((guide) =>
-    `${guide.name} ${guide.overview} ${guide.aliases.join(" ")}`.toLowerCase().includes(normalized),
-  );
+  const search = searchItems(guides, query,
+    (guide) => `${guide.name} ${guide.overview} ${guide.aliases.join(" ")}`,
+    (guide) => [guide.name, ...guide.aliases]);
+  const filtered = search.items;
   return (
     <div className="flex flex-col gap-8">
       <InputGroup className="h-11 max-w-2xl">
@@ -56,6 +59,7 @@ export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
           aria-label="ค้นหาไกด์"
         />
       </InputGroup>
+      <SearchNotice fuzzy={search.fuzzy} />
       {filtered.length ? (
         <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
           {filtered.map((guide, index) => (