48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import {
|
|
FormControl,
|
|
InputLabel,
|
|
MenuItem,
|
|
Select,
|
|
SelectChangeEvent,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
|
|
// TODO: change MenuItem values to something meaningful
|
|
|
|
interface Props {
|
|
group: string;
|
|
setGroup: (group: string) => void;
|
|
}
|
|
|
|
const groups = ["Favorites", "Team"];
|
|
|
|
const GroupSelect: React.FC<Props> = ({ group, setGroup }) => {
|
|
const handleChange = (e: SelectChangeEvent) => {
|
|
setGroup(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<FormControl variant="filled" fullWidth>
|
|
<InputLabel id="group-select-label">
|
|
<Typography color="black">Group</Typography>
|
|
</InputLabel>
|
|
<Select
|
|
labelId="group-select-label"
|
|
id="group-select"
|
|
value={group}
|
|
label="Group"
|
|
onChange={handleChange}
|
|
>
|
|
{groups.map((group, i) => (
|
|
<MenuItem value={group} key={i}>
|
|
<Typography color="black">{group}</Typography>
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
};
|
|
|
|
export default GroupSelect;
|