text: import React from 'react'
  import { useTheme } from '@material-ui/core/styles'
  import { Grid, Paper } from '@material-ui/core'
  import { makeStyles } from '@material-ui/core/styles'
  import clsx from 'clsx'
  
  import UserCount from './UserCount'
  import Map from './Map/Map.js'
  
  export default function Dashboard() {
    const theme = useTheme()
  
    const useStyles = makeStyles((theme) => ({
      root: {
        display: 'flex',
      },
      paper: {
        padding: theme.spacing(2),
        display: 'flex',
        overflow: 'auto',
        flexDirection: 'column',
      },
      fixedHeight: {
        height: 240,
      },
      mapHeight: {
        height: '70vh',
        width: '60wh',
      },
    }))
    const classes = useStyles(theme)
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight)
  
    return (
      <React.Fragment>
        <Grid container spacing={4}>
          {/* Ratings Chart */}
          <p>Click on the map to get to the nearest location</p>
  
          <Grid item xs={10}>
            <Paper className={classes.mapHeight}>
              <Map />
            </Paper>
          </Grid>
          {/* User Count */}
          <Grid item xs={12} md={4} lg={5}>
            <Paper className={fixedHeightPaper}>
              <UserCount />
            </Paper>
          </Grid>
          {/* Recent Reviews */}
        </Grid>
      </React.Fragment>
    )
  }
  