Spaces:
Building
Building
File size: 2,535 Bytes
f152ae2 |
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 83 84 85 86 |
import {
Flex,
Stack,
Text,
Tooltip,
Transition,
UnstyledButton,
em,
} from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import { useEffect, useState } from "react";
import { addLogEntry } from "../../../../modules/logEntries";
import type { SearchResults } from "../../../../modules/search";
import { getHostname } from "../../../../modules/stringFormatters";
export default function SearchResultsList({
searchResults,
}: {
searchResults: SearchResults["textResults"];
}) {
const shouldDisplayDomainBelowTitle = useMediaQuery(
`(max-width: ${em(720)})`,
);
const [isMounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return (
<Stack gap={40}>
{searchResults.map(([title, snippet, url], index) => (
<Transition
key={url}
mounted={isMounted}
transition="fade"
timingFunction="ease"
enterDelay={index * 200}
duration={750}
>
{(styles) => (
<Stack gap={16} style={styles}>
<Flex
gap={shouldDisplayDomainBelowTitle ? 0 : 16}
justify="space-between"
align="flex-start"
direction={shouldDisplayDomainBelowTitle ? "column" : "row"}
>
<UnstyledButton
variant="transparent"
component="a"
href={url}
target="_blank"
onClick={() => {
addLogEntry("User clicked a text result");
}}
>
<Text fw="bold" c="var(--mantine-color-blue-light-color)">
{title}
</Text>
</UnstyledButton>
<Tooltip label={url}>
<UnstyledButton
variant="transparent"
component="a"
href={url}
target="_blank"
fs="italic"
ta="end"
onClick={() => {
addLogEntry("User clicked a text result");
}}
>
{getHostname(url)}
</UnstyledButton>
</Tooltip>
</Flex>
<Text size="sm" c="dimmed" style={{ wordWrap: "break-word" }}>
{snippet}
</Text>
</Stack>
)}
</Transition>
))}
</Stack>
);
}
|