Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { useContext } from "react";
import AppContext from "../AppContext";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import { ListItem, Typography } from "@material-ui/core";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
}));
export default function SelectDifficulty(props) {
const classes = useStyles();
const value = useContext(AppContext);
let { generateRandomWords } = value;
return (
<div className={classes.root}>
<Typography variant="h6" component="h6">
1. Choose difficulty
</Typography>
<Divider />
<List component="nav" aria-label="secondary mailbox folders">
<ListItem button onClick={() => generateRandomWords("easy")}>
<ListItemText primary="Easy" />
</ListItem>
<ListItem button onClick={() => generateRandomWords("medium")}>
<ListItemText primary="Medium" />
</ListItem>
<ListItem button onClick={() => generateRandomWords("difficult")}>
<ListItemText primary="Difficult" />
</ListItem>
<ListItem button onClick={() => generateRandomWords("veryDifficult")}>
<ListItemText primary="Very Difficult" />
</ListItem>
</List>
</div>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment