text: import React, { useState } from 'react'
  import { makeStyles } from '@material-ui/core/styles'
  import CssBaseline from '@material-ui/core/CssBaseline'
  import Paper from '@material-ui/core/Paper'
  import Grid from '@material-ui/core/Grid'
  import SignIn from './SignIn'
  import SignUp from './SignUp'
  
  const useStyles = makeStyles((theme) => ({
    root: {
      height: '100vh',
    },
    image: {
      backgroundImage: 'url(/loginpage-background.jpg)',
      backgroundRepeat: 'no-repeat',
      backgroundColor:
        theme.palette.type === 'light'
          ? theme.palette.grey[50]
          : theme.palette.grey[900],
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    },
  }))
  
  export default () => {
    const classes = useStyles()
    const [page, setPage] = useState('signIn')
  
    return (
      <Grid container component="main" className={classes.root}>
        <CssBaseline />
        <Grid item xs={false} sm={4} md={7} className={classes.image} />
        <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
          {page === 'signIn' ? (
            <SignIn setPage={setPage} />
          ) : (
            <SignUp setPage={setPage} />
          )}
        </Grid>
      </Grid>
    )
  }
  