Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | import { Text } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import testIds from "./testIds";
export interface SearchDetailsProps {
limit: number;
offset: number;
count: number;
filtered: boolean;
query?: string;
}
const Em: FunctionComponent = ({ children }) => (
<Text as="strong" color="textSecondary">
{children}
</Text>
);
const Count: FunctionComponent<{
first: number;
count: number;
last: number;
}> = ({ first, count, last }) => {
if (!first && last >= count) {
return (
<>
<Em>{count}</Em> of <Em>{count}</Em>
</>
);
}
return (
<>
<Em>
{count ? first + 1 : count} - {last > count ? count : last}
</Em>{" "}
of <Em>{count}</Em>
</>
);
};
export const SearchDetails: FunctionComponent<SearchDetailsProps> = ({
limit,
offset,
count,
filtered,
query,
}) => {
const first = limit * offset;
const last = first + limit;
const hasResults = count > 0;
return (
<Text data-testid={testIds.searchDetails}>
{hasResults ? (
<>
Displaying <Count count={count} first={first} last={last} />{" "}
{filtered ? "search results" : "constructs"}
</>
) : (
<>{filtered ? "There were no search results" : "No constructs found"}</>
)}
{query && (
<>
{" for "}
<Em>{query}</Em>
</>
)}
.{!hasResults && filtered && <> Try a different term.</>}
</Text>
);
};
|