diff --git a/apps/web/components/ui/Autocomplete.tsx b/apps/web/components/ui/Autocomplete.tsx new file mode 100644 index 00000000..86608a4a --- /dev/null +++ b/apps/web/components/ui/Autocomplete.tsx @@ -0,0 +1,45 @@ +"use client" + +import Link from "next/link" +import { useRouter } from "next/navigation" +import { useState } from "react" + +export default function Autocomplete({ searchProducts }: any) { + const [results, setResults] = useState(null) + const [query, setQuery] = useState("") + const router = useRouter() + + return ( +
+ { + const query = e.target.value + setQuery(query) + setResults(await searchProducts(query)) + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + router.push(`/search?q=${query}`) + } + }} + /> + + {results?.hits ? ( + + ) : null} +
+ ) +} diff --git a/apps/web/components/ui/Header.tsx b/apps/web/components/ui/Header.tsx index 649f1fb3..cea45e42 100644 --- a/apps/web/components/ui/Header.tsx +++ b/apps/web/components/ui/Header.tsx @@ -1,12 +1,19 @@ +import { meilisearch } from "client/meilisearch" import { storefrontClient } from "client/storefrontClient" import { env } from "env.mjs" import { unstable_cache } from "next/cache" import Link from "next/link" -import { Input } from "./Input" +import Autocomplete from "./Autocomplete" export async function Header() { const items = await getCachedMenuItems() + async function searchProducts(query: string) { + "use server" + + return (await meilisearch?.getIndex("products"))?.search(query, { limit: 5 }) + } + return (
@@ -14,10 +21,7 @@ export async function Header() { Acme Inc