Spaces:
Paused
Paused
File size: 2,219 Bytes
a7634ef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import { useEffect, useState } from "react";
import { SearchResults } from "../modules/search";
import { Tooltip } from "react-tooltip";
import Markdown from "markdown-to-jsx";
export function SearchResultsList({
searchResults,
urlsDescriptions,
}: {
searchResults: SearchResults;
urlsDescriptions: Record<string, string>;
}) {
const [windowWidth, setWindowWidth] = useState(self.innerWidth);
useEffect(() => {
const handleResize = () => {
setWindowWidth(self.innerWidth);
};
self.addEventListener("resize", handleResize);
return () => {
self.removeEventListener("resize", handleResize);
};
}, []);
const shouldDisplayDomainBelowTitle = windowWidth < 720;
return (
<ul>
{searchResults.map(([title, snippet, url], index) => (
<li key={url}>
<Tooltip
id={`search-result-${index}`}
place="top-start"
variant="info"
opacity="1"
style={{ width: "75vw", maxWidth: "600px" }}
>
{snippet}
<br />
<br />
{url}
</Tooltip>
<div
style={{
display: "flex",
justifyContent: "space-between",
gap: shouldDisplayDomainBelowTitle ? 0 : "1rem",
flexDirection: shouldDisplayDomainBelowTitle ? "column" : "row",
}}
>
<a
href={url}
data-tooltip-id={`search-result-${index}`}
target="_blank"
>
{title}
</a>
<a href={url} target="_blank">
<cite
style={{
fontSize: "small",
color: "gray",
whiteSpace: "nowrap",
}}
>
{new URL(url).hostname.replace("www.", "")}
</cite>
</a>
</div>
{urlsDescriptions[url] && (
<blockquote>
<Markdown>{urlsDescriptions[url]}</Markdown>
</blockquote>
)}
</li>
))}
</ul>
);
}
|