57 lines
1.2 KiB
JavaScript
57 lines
1.2 KiB
JavaScript
import { TextField, InputAdornment } from '@mui/material';
|
|
import { Search } from './icons/icons';
|
|
|
|
function SearchComponent({
|
|
placeholder = 'Поиск...',
|
|
value,
|
|
onChange,
|
|
height = '2rem',
|
|
...rest
|
|
}) {
|
|
const handleChange = (e) => {
|
|
onChange(e.target.value);
|
|
};
|
|
return (
|
|
<TextField
|
|
{...rest}
|
|
size="small"
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={handleChange}
|
|
sx={{
|
|
minWidth: '20rem',
|
|
maxWidth: '100%',
|
|
width: '100%',
|
|
flex: 1,
|
|
'& .MuiOutlinedInput-root': {
|
|
height: height,
|
|
maxHeight: '5rem',
|
|
borderRadius: '0.5rem',
|
|
backgroundColor: '#fff',
|
|
padding: '0.25rem 0.75rem',
|
|
'& fieldset': {
|
|
border: '0.06rem solid rgba(0, 0, 0, 0.1)',
|
|
},
|
|
'&.Mui-focused fieldset': {
|
|
borderWidth: '0.1rem',
|
|
},
|
|
},
|
|
'& .MuiOutlinedInput-input': {
|
|
padding: 0,
|
|
},
|
|
}}
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<Search />
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default SearchComponent;
|