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 | 1x | import { QuestionIcon } from "@chakra-ui/icons";
import {
Flex,
Heading,
Text,
Popover,
PopoverTrigger,
PopoverBody,
PopoverArrow,
PopoverContent,
useBreakpointValue,
PlacementWithLogical,
} from "@chakra-ui/react";
import { FunctionComponent } from "react";
import { SEARCH_ANALYTICS } from "./constants";
import { eventName } from "../../contexts/Analytics";
export interface FilterHeadingProps {
name: string;
hint?: string;
}
export const FilterHeading: FunctionComponent<FilterHeadingProps> = ({
name,
hint,
}) => {
const placement = useBreakpointValue<PlacementWithLogical>({
base: "auto",
md: "right",
});
return (
<Flex align="center" mb={1}>
<Heading as="h3" size="sm" w="max-content">
{name}
</Heading>
{hint ? (
<Popover colorScheme="dark" placement={placement} strategy="fixed">
<PopoverTrigger>
<Flex
aria-label={`Hint: ${name}`}
as="button"
data-event={eventName(SEARCH_ANALYTICS.FILTERS, name, "Popover")}
ml={2}
>
<QuestionIcon h={3.5} w={3.5} />
</Flex>
</PopoverTrigger>
<PopoverContent
bg="gray.700"
borderRadius="base"
color="white"
fontSize="sm"
mx={{ base: "1rem", md: "initial" }}
shadow="whiteAlpha.300"
>
<PopoverArrow bg="gray.700" />
<PopoverBody>
<Text>{hint}</Text>
</PopoverBody>
</PopoverContent>
</Popover>
) : null}
</Flex>
);
};
|