| 1 |
rakinar2 |
627 |
import { CircularProgress } from "@nextui-org/react"; |
| 2 |
|
|
import { useEffect, useState, type FC } from "react"; |
| 3 |
|
|
import Link from "../Navigation/Link"; |
| 4 |
|
|
|
| 5 |
|
|
type SearchResultsProps = { |
| 6 |
|
|
query: string; |
| 7 |
|
|
onClose: () => void; |
| 8 |
|
|
}; |
| 9 |
|
|
|
| 10 |
|
|
type SearchResultItem = { |
| 11 |
|
|
title?: string; |
| 12 |
|
|
description?: string; |
| 13 |
|
|
data: string; |
| 14 |
|
|
match: "title" | "description" | "data"; |
| 15 |
|
|
url: string; |
| 16 |
|
|
}; |
| 17 |
|
|
|
| 18 |
|
|
const SearchResults: FC<SearchResultsProps> = ({ query, onClose }) => { |
| 19 |
|
|
const [results, setResults] = useState<SearchResultItem[] | null>(null); |
| 20 |
|
|
const [isLoading, setIsLoading] = useState(false); |
| 21 |
|
|
const [isNotFound, setIsNotFound] = useState(false); |
| 22 |
|
|
|
| 23 |
|
|
useEffect(() => { |
| 24 |
|
|
if (!query?.trim()) { |
| 25 |
|
|
return; |
| 26 |
|
|
} |
| 27 |
|
|
|
| 28 |
|
|
const controller = new AbortController(); |
| 29 |
|
|
|
| 30 |
|
|
setIsLoading(true); |
| 31 |
|
|
|
| 32 |
|
|
fetch(`/search?q=${encodeURIComponent(query)}`, { |
| 33 |
|
|
signal: controller.signal, |
| 34 |
|
|
}) |
| 35 |
|
|
.then(response => response.json()) |
| 36 |
|
|
.then(data => { |
| 37 |
|
|
setIsNotFound(false); |
| 38 |
|
|
setIsLoading(false); |
| 39 |
|
|
setResults(data.results); |
| 40 |
|
|
setIsNotFound(data.results.length === 0); |
| 41 |
|
|
}) |
| 42 |
|
|
.catch(console.error); |
| 43 |
|
|
|
| 44 |
|
|
return () => controller.abort(); |
| 45 |
|
|
}, [query]); |
| 46 |
|
|
|
| 47 |
|
|
return ( |
| 48 |
|
|
<> |
| 49 |
|
|
{" "} |
| 50 |
|
|
{isLoading || |
| 51 |
|
|
isNotFound || |
| 52 |
|
|
(results?.length && ( |
| 53 |
|
|
<div |
| 54 |
|
|
className="max-lg:hidden fixed top-0 left-0 z-[1000000001] bg-transparent h-screen w-screen" |
| 55 |
|
|
onClick={onClose} |
| 56 |
|
|
/> |
| 57 |
|
|
))} |
| 58 |
|
|
<div className="lg:absolute w-full top-12 lg:z-[1000000002] lg:bg-neutral-900 lg:[box-shadow:0_0_3px_0_rgba(255,255,255,0.4)] rounded-lg p-2 lg:max-h-[60vh] lg:overflow-y-scroll"> |
| 59 |
|
|
{isLoading && ( |
| 60 |
|
|
<div className="flex items-center gap-2 justify-center"> |
| 61 |
|
|
<CircularProgress size={"sm"} /> |
| 62 |
|
|
<p>Loading...</p> |
| 63 |
|
|
</div> |
| 64 |
|
|
)} |
| 65 |
|
|
{isNotFound && !isLoading && ( |
| 66 |
|
|
<div className="text-center">No result found</div> |
| 67 |
|
|
)} |
| 68 |
|
|
{!!results?.length && |
| 69 |
|
|
!isLoading && |
| 70 |
|
|
!isNotFound && |
| 71 |
|
|
results.map(result => ( |
| 72 |
|
|
<Link |
| 73 |
|
|
key={result.url} |
| 74 |
|
|
href={result.url} |
| 75 |
|
|
onClick={onClose} |
| 76 |
|
|
className="p-2 hover:bg-neutral-800 rounded-lg cursor-pointer block" |
| 77 |
|
|
> |
| 78 |
|
|
<div>{result.title || "Home"}</div> |
| 79 |
|
|
|
| 80 |
|
|
<p className="text-[#999] text-sm"> |
| 81 |
|
|
May include information related to{" "} |
| 82 |
|
|
<strong className="text-white">{query}</strong> |
| 83 |
|
|
</p> |
| 84 |
|
|
</Link> |
| 85 |
|
|
))} |
| 86 |
|
|
</div> |
| 87 |
|
|
</> |
| 88 |
|
|
); |
| 89 |
|
|
}; |
| 90 |
|
|
|
| 91 |
|
|
export default SearchResults; |
Parent Directory
| 
Revision Log