SHARE
TWEET

Untitled

a guest Jul 20th, 2019 82 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import Typography from "@material-ui/core/Typography";
  3. import Button from "@material-ui/core/Button";
  4. import PropTypes from "prop-types";
  5. import { withStyles } from "@material-ui/core/styles";
  6. import Paper from "@material-ui/core/Paper";
  7. import clsx from "clsx";
  8.  
  9. const styles = theme => ({
  10.   root: {
  11.     marginTop: 80,
  12.     textAlign: "center",
  13.     justifyContent: "center",
  14.     alignItems: "center",
  15.     marginLeft: "auto",
  16.     marginRight: "auto",
  17.     width: 350,
  18.     ...theme.mixins.gutters(),
  19.     paddingTop: theme.spacing.unit * 2,
  20.     paddingBottom: theme.spacing.unit * 2
  21.   },
  22.   questionTitle: {
  23.     marginBottom: 15
  24.   },
  25.   button: {
  26.     margin: theme.spacing.unit,
  27.     backgroundColor: "#4286f4"
  28.   },
  29.   bootstrapRoot: {
  30.     boxShadow: "none",
  31.     fontWeight: "bold",
  32.     textTransform: "none",
  33.     border: "1px solid",
  34.     lineHeight: 1.5,
  35.     backgroundColor: "#4286f4",
  36.     borderColor: "#4286f4",
  37.     "&:hover": {
  38.       backgroundColor: "#0069d9",
  39.       borderColor: "#0062cc"
  40.     },
  41.     "&:active": {
  42.       boxShadow: "none",
  43.       backgroundColor: "#0062cc",
  44.       borderColor: "#005cbf"
  45.     },
  46.     "&:focus": {
  47.       boxShadow: "0 0 0 0.2rem rgba(0,123,255,.5)"
  48.     }
  49.   }
  50. });
  51.  
  52. const ToggleAnswer = ({ toggle, content }) => {
  53.   const [isShown, setIsShown] = React.useState(false);
  54.   const show = () => setIsShown(true);
  55.  
  56.   return (
  57.     <React.Fragment>
  58.       {toggle(show)}
  59.       {isShown && content}
  60.     </React.Fragment>
  61.   );
  62. };
  63.  
  64. export function Question(props) {
  65.   const { classes } = props;
  66.   return (
  67.     <div>
  68.       <Paper className={classes.root} elevation={1}>
  69.         <Typography
  70.           className={classes.questionTitle}
  71.           variant="h3"
  72.           component="h3"
  73.         >
  74.           Components 100
  75.         </Typography>
  76.         <Typography variant="h5" component="p">
  77.           Components accept arbritary inputs known as _______?
  78.         </Typography>
  79.       </Paper>
  80.       <p style={{ textAlign: "center" }}>
  81.         <ToggleAnswer
  82.           toggle={show => (
  83.             <Button
  84.               className={clsx(classes.button, classes.bootstrapRoot)}
  85.               variant="contained"
  86.               color="primary"
  87.               onClick={show}
  88.             >
  89.               Show Answer
  90.             </Button>
  91.           )}
  92.           content={
  93.             <div>
  94.               <Typography variant="h5" component="h3">
  95.                 What are Props?
  96.               </Typography>
  97.             </div>
  98.           }
  99.         />
  100.       </p>
  101.     </div>
  102.   );
  103. }
  104.  
  105. Question.propTypes = {
  106.   classes: PropTypes.object.isRequired
  107. };
  108.  
  109. export default withStyles(styles)(Question);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top