File size: 5,466 Bytes
95b5a04 | 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 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 | import PropTypes from 'prop-types';
import { useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import InputAdornment from '@mui/material/InputAdornment';
import OutlinedInput from '@mui/material/OutlinedInput';
import Popper from '@mui/material/Popper';
import Box from '@mui/material/Box';
// third party
import PopupState, { bindPopper, bindToggle } from 'material-ui-popup-state';
// project imports
import Transitions from 'ui-component/extended/Transitions';
// assets
import { IconAdjustmentsHorizontal, IconSearch, IconX } from '@tabler/icons-react';
function HeaderAvatar({ children, ref, ...others }) {
const theme = useTheme();
return (
<Avatar
ref={ref}
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
color: theme.vars.palette.secondary.dark,
background: theme.vars.palette.secondary.light,
'&:hover': {
color: theme.vars.palette.secondary.light,
background: theme.vars.palette.secondary.dark
}
}}
{...others}
>
{children}
</Avatar>
);
}
// ==============================|| SEARCH INPUT - MOBILE||============================== //
function MobileSearch({ value, setValue, popupState }) {
const theme = useTheme();
return (
<OutlinedInput
id="input-search-header"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Search"
startAdornment={
<InputAdornment position="start">
<IconSearch stroke={1.5} size="16px" />
</InputAdornment>
}
endAdornment={
<InputAdornment position="end">
<HeaderAvatar>
<IconAdjustmentsHorizontal stroke={1.5} size="20px" />
</HeaderAvatar>
<Box sx={{ ml: 2 }}>
<Avatar
variant="rounded"
sx={{
...theme.typography.commonAvatar,
...theme.typography.mediumAvatar,
bgcolor: 'orange.light',
color: 'orange.dark',
'&:hover': { bgcolor: 'orange.dark', color: 'orange.light' }
}}
{...bindToggle(popupState)}
>
<IconX stroke={1.5} size="20px" />
</Avatar>
</Box>
</InputAdornment>
}
aria-describedby="search-helper-text"
slotProps={{ input: { 'aria-label': 'weight', sx: { bgcolor: 'transparent', pl: 0.5 } } }}
sx={{ width: '100%', ml: 0.5, px: 2, bgcolor: 'background.paper' }}
/>
);
}
// ==============================|| SEARCH INPUT ||============================== //
export default function SearchSection() {
const [value, setValue] = useState('');
return (
<>
<Box sx={{ display: { xs: 'block', md: 'none' } }}>
<PopupState variant="popper" popupId="demo-popup-popper">
{(popupState) => (
<>
<Box sx={{ ml: 2 }}>
<HeaderAvatar {...bindToggle(popupState)}>
<IconSearch stroke={1.5} size="19.2px" />
</HeaderAvatar>
</Box>
<Popper
{...bindPopper(popupState)}
transition
sx={{ zIndex: 1100, width: '99%', top: '-55px !important', px: { xs: 1.25, sm: 1.5 } }}
>
{({ TransitionProps }) => (
<>
<Transitions type="zoom" {...TransitionProps} sx={{ transformOrigin: 'center left' }}>
<Card sx={{ bgcolor: 'background.default', border: 0, boxShadow: 'none' }}>
<Box sx={{ p: 2 }}>
<Grid container sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
<Grid size="grow">
<MobileSearch value={value} setValue={setValue} popupState={popupState} />
</Grid>
</Grid>
</Box>
</Card>
</Transitions>
</>
)}
</Popper>
</>
)}
</PopupState>
</Box>
<Box sx={{ display: { xs: 'none', md: 'block' } }}>
<OutlinedInput
id="input-search-header"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Search"
startAdornment={
<InputAdornment position="start">
<IconSearch stroke={1.5} size="16px" />
</InputAdornment>
}
endAdornment={
<InputAdornment position="end">
<HeaderAvatar>
<IconAdjustmentsHorizontal stroke={1.5} size="20px" />
</HeaderAvatar>
</InputAdornment>
}
aria-describedby="search-helper-text"
slotProps={{ input: { 'aria-label': 'weight', sx: { bgcolor: 'transparent', pl: 0.5 } } }}
sx={{ width: { md: 250, lg: 434 }, ml: 2, px: 2 }}
/>
</Box>
</>
);
}
HeaderAvatar.propTypes = { children: PropTypes.node, ref: PropTypes.any, others: PropTypes.any };
MobileSearch.propTypes = { value: PropTypes.string, setValue: PropTypes.func, popupState: PropTypes.any };
|