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 74 75 76 | 61x 61x 61x 112x 112x 20x | import React from 'react';
import Box from '@material-ui/core/Box'
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/styles';
import NavBreadcrumbs from "../../components/NavBreadcrumbs.js";
import SearchBar from './SearchBar';
import { TitleSection } from '../../components'
const useStyles = makeStyles((theme) => ({
container: {
minHeight: '20rem',
},
containerDefault: {
minHeight: '30rem',
},
link: {
color: theme.palette.text.secondary,
'&:hover': {
cursor: 'pointer',
},
},
}));
const breadCrumbLinks = [
{ href: '/home', name: 'Home' },
{ href: '/projects', name: 'Search Projects' },
];
const HeaderSection = ({
onLinkClick,
onSearchClick,
onSearchInput,
onSearchKeyPress,
searchQuery,
showDefault,
}) => {
const classes = useStyles();
return (
<Box className='boxBackground'>
<Container className={showDefault ? classes.containerDefault : classes.container}>
<NavBreadcrumbs crumbs={breadCrumbLinks} color='primary' />
<TitleSection>Search Projects</TitleSection>
<Grid container justify='center'>
<Grid item xs={false} sm={1} />
<Grid item xs={12} sm={9}>
<SearchBar
dataCy='search-projects'
onIconClick={onSearchClick}
onInput={(e) => onSearchInput(e.target.value)}
onKeyPress={onSearchKeyPress}
placeholder='Search the Civic Tech Index'
value={searchQuery}
/>
</Grid>
<Grid item xs={false} sm={1} />
{!showDefault && (
<Typography
variant='body2'
className={classes.link}
onClick={onLinkClick}
data-cy='how-to-improve-your-search-results'
>
<u>How to improve your search result</u>
</Typography>
)}
</Grid>
</Container>
</Box>
);
}
export default HeaderSection;
|