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 | import { ChevronDownIcon } from "@chakra-ui/icons";
import {
Button,
Drawer,
Stack,
DrawerBody,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
useDisclosure,
} from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { CDKFilter } from "./CDKFilter";
import { KeywordsFilter } from "./KeywordsFilter";
import { LanguageFilter } from "./LanguageFilter";
import { SortFilter } from "./SortFilter";
import { TagFilter } from "./TagFilter";
/**
* The mobile filter Drawer (Bottomsheet in iOS terminology)
*/
export const SortAndFilterDrawer: FunctionComponent = () => {
const drawer = useDisclosure();
return (
<>
<Button
colorScheme="brand"
display={{ md: "none" }}
onClick={drawer.onOpen}
rightIcon={<ChevronDownIcon />}
variant="link"
>
Sorting and Filters
</Button>
<Drawer {...drawer} placement="bottom">
<DrawerOverlay />
<DrawerContent color="textPrimary" maxH="full">
<DrawerHeader borderBottom="base">Sorting and Filters</DrawerHeader>
<DrawerCloseButton />
<DrawerBody>
<Stack color="textPrimary" pb={4} spacing={4}>
<SortFilter />
<CDKFilter />
<LanguageFilter />
<TagFilter />
<KeywordsFilter />
</Stack>
</DrawerBody>
</DrawerContent>
</Drawer>
</>
);
};
|