CHIEFSOFT\ameye
90 lines
2.2 KiB
JavaScript
90 lines
2.2 KiB
JavaScript
import * as React from "react";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import Box from "@mui/material/Box";
|
|
import OutlinedInput from "@mui/material/OutlinedInput";
|
|
import InputLabel from "@mui/material/InputLabel";
|
|
import MenuItem from "@mui/material/MenuItem";
|
|
import FormControl from "@mui/material/FormControl";
|
|
import Select from "@mui/material/Select";
|
|
import Chip from "@mui/material/Chip";
|
|
|
|
const ITEM_HEIGHT = 48;
|
|
const ITEM_PADDING_TOP = 8;
|
|
const MenuProps = {
|
|
PaperProps: {
|
|
style: {
|
|
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
|
width: 250,
|
|
},
|
|
},
|
|
};
|
|
|
|
const names = [
|
|
"UI/UX Design",
|
|
"Frontend Development",
|
|
"Backend Development",
|
|
"React App",
|
|
"E-commerce",
|
|
"PSD To HTML",
|
|
];
|
|
|
|
function getStyles(name, personName, theme) {
|
|
return {
|
|
fontWeight:
|
|
personName.indexOf(name) === -1
|
|
? theme.typography.fontWeightRegular
|
|
: theme.typography.fontWeightMedium,
|
|
};
|
|
}
|
|
|
|
const Categories = () => {
|
|
const theme = useTheme();
|
|
const [personName, setPersonName] = React.useState([]);
|
|
|
|
const handleChange = (event) => {
|
|
const {
|
|
target: { value },
|
|
} = event;
|
|
setPersonName(
|
|
// On autofill we get a stringified value.
|
|
typeof value === "string" ? value.split(",") : value
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<FormControl fullWidth>
|
|
<InputLabel id="demo-multiple-chip-label">Select</InputLabel>
|
|
<Select
|
|
labelId="demo-multiple-chip-label"
|
|
id="demo-multiple-chip"
|
|
multiple
|
|
value={personName}
|
|
onChange={handleChange}
|
|
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
|
renderValue={(selected) => (
|
|
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
|
{selected.map((value) => (
|
|
<Chip key={value} label={value} />
|
|
))}
|
|
</Box>
|
|
)}
|
|
MenuProps={MenuProps}
|
|
>
|
|
{names.map((name) => (
|
|
<MenuItem
|
|
key={name}
|
|
value={name}
|
|
style={getStyles(name, personName, theme)}
|
|
>
|
|
{name}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Categories;
|