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 | import { Heading, Stack } from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { CDKFilter } from "./CDKFilter";
import { KeywordsFilter } from "./KeywordsFilter";
import { LanguageFilter } from "./LanguageFilter";
import { TagFilter } from "./TagFilter";
import testIds from "./testIds";
import { Card } from "../../components/Card";
export interface FilterPanelProps {}
// Header height + section padding
const TOP_OFFSET = "5.75rem";
/**
* The desktop Resolution Filter Panel
*/
export const FilterPanel: FunctionComponent<FilterPanelProps> = () => {
return (
<Card
borderRadius="sm"
data-testid={testIds.filtersPanel}
display={{ base: "none", md: "flex" }}
maxH={`calc(100vh - ${TOP_OFFSET} - 1.25rem)`}
maxW="23rem"
minW="100%"
overflow="hidden auto"
p={4}
pos="sticky"
top={TOP_OFFSET}
zIndex="docked"
>
<Stack color="textPrimary" h="max-content" spacing={4} top={4}>
<Heading as="h2" size="sm">
Filters
</Heading>
<CDKFilter />
<LanguageFilter />
<TagFilter />
<KeywordsFilter />
</Stack>
</Card>
);
};
|