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 | 1x 16x 16x | import { SearchIcon } from "@assets/rebrandIcons";
import { Input } from "@mui/material";
import { styled } from "@mui/material";
import { palette } from "@palette";
type MCCSearchInputProps = {
value: string;
onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
};
const MCCSearchInput = ({ value, onChange }: MCCSearchInputProps) => {
return (
<StyledInput
disableUnderline
startAdornment={
<SearchIcon width={24} height={24} stroke={palette.gray[200]} />
}
onChange={onChange}
value={value}
/>
);
};
export default MCCSearchInput;
const StyledInput = styled(Input)(({ theme }) => ({
background: palette.background.dimmedWhite,
border: `1px solid ${palette.neutral[30]}`,
borderRadius: "90px",
width: "250px",
padding: "4px 12px",
"& input": {
fontSize: "14px",
lineHeight: "16.8px",
fontWeight: 350,
color: palette.black[300],
padding: 0,
height: "24px",
marginInline: "4px",
},
"& input::-webkit-input-placeholder": {
color: palette.gray[100],
},
"& input:placeholder-shown ~ div": {
display: "none",
},
"&:has(input:focus)": {
boxSizing: "border-box",
outline: `none`,
},
"&:has(.Mui-disabled)": {
background: palette.neutral[10],
border: "none",
outline: "none",
},
[theme.breakpoints.down("sm")]: {
width: "100%",
"& input": {
fontSize: "16px",
lineHeight: "19.2px",
height: "32px",
},
},
}));
|