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 { SearchIcon } from "@chakra-ui/icons";
import { Box, IconButton, useDisclosure } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { Switch, Route } from "react-router-dom";
import { HEADER_ANALYTICS } from "./constants";
import testIds from "./testIds";
import { ROUTES } from "../../constants/url";
import { SearchBar, SearchOverlay, SearchSuggestions } from "../SearchBar";
import { SearchModal } from "../SearchModal";
/**
* Renders a SearchBar at desktop resolutions and shows a search icon which opens a modal on mobile resolutions
*/
export const HeaderSearch: FunctionComponent = () => {
const searchModal = useDisclosure();
return (
<Switch>
<Route exact path={[ROUTES.HOME, ROUTES.SEARCH]} />
<Route path="*">
{/* Desktop / Tablet Search Trigger */}
<Box
data-testid={testIds.searchInput}
display={{ base: "none", lg: "initial" }}
>
<SearchBar bg="bgPrimary" data-event={HEADER_ANALYTICS.SEARCH}>
<SearchOverlay />
<SearchSuggestions />
</SearchBar>
</Box>
{/* Mobile Search Trigger */}
<Box display={{ base: "initial", lg: "none" }}>
<IconButton
aria-label="Search Icon"
borderRadius="md"
data-event={HEADER_ANALYTICS.SEARCH_MODAL.OPEN}
data-testid={testIds.searchIcon}
icon={<SearchIcon color="textTertiary" />}
onClick={searchModal.onOpen}
variant="ghost"
/>
<SearchModal {...searchModal} />
</Box>
</Route>
</Switch>
);
};
|