1import { useSearch } from '@markprompt/react';
2
3function Search() {
4 const { searchResults, searchQuery, setSearchQuery, submitSearchQuery } =
5 useSearch({ projectKey: 'YOUR-PROJECT-KEY' });
6
7 return (
8 <div className="flex h-full w-full flex-col">
9 {searchResults.map((result) => (
10 <a key={result.href} href={result.href}>
11 {result.title}
12 </a>
13 ))}
14
15 <form
16 onSubmit={async (e) => {
17 e.preventDefault();
18 await submitSearchQuery(searchQuery);
19 }}
20 >
21 <input
22 className="fixed inset-x-2 bottom-0 rounded border border-neutral-200 p-2"
23 value={input}
24 placeholder="Send a message"
25 onChange={(e) => {
26 setSearchQuery(event.target.value);
27 submitSearchQuery(event.target.value);
28 }}
29 />
30 </form>
31 </div>
32 );
33}