diff options
Diffstat (limited to 'modern/src/settings/components')
-rw-r--r-- | modern/src/settings/components/SearchHeader.js | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/modern/src/settings/components/SearchHeader.js b/modern/src/settings/components/SearchHeader.js new file mode 100644 index 00000000..25757ed2 --- /dev/null +++ b/modern/src/settings/components/SearchHeader.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { TextField, useTheme, useMediaQuery } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { useTranslation } from '../../common/components/LocalizationProvider'; + +export const filterByKeyword = (keyword) => (item) => !keyword || JSON.stringify(item).toLowerCase().includes(keyword.toLowerCase()); + +const useStyles = makeStyles((theme) => ({ + header: { + position: 'sticky', + left: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'stretch', + padding: theme.spacing(3, 2, 2), + }, +})); + +const SearchHeader = ({ keyword, setKeyword }) => { + const theme = useTheme(); + const classes = useStyles(); + const t = useTranslation(); + + const phone = useMediaQuery(theme.breakpoints.down('sm')); + + return phone ? ( + <div className={classes.header}> + <TextField + variant="outlined" + placeholder={t('sharedSearch')} + value={keyword} + onChange={(e) => setKeyword(e.target.value)} + /> + </div> + ) : ''; +}; + +export default SearchHeader; |