ReservationPage.tsx

import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  CssBaseline,
  Grid,
  Typography,
  Hidden,
  createMuiTheme,
  responsiveFontSizes,
  MuiThemeProvider,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle ,
  TextField,
  Button
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';

import { NavBar } from '../HomePage2/NavBar';
import { NavBarLogin } from '../HomePage2/NavBarLogin';
import { Steps } from '../HomePage2/Steps';
import { Numbers } from '../HomePage2/Numbers';
import { Reservation } from '../HomePage2/Reservation';

let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);

const useStyles = makeStyles(() => ({
  root: {
    minHeight: '36vh',
    backgroundImage: `url(${'/assets/bg7.png'})`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
  },
  rightAlign: {
    marginLeft: 'auto',
  },
  whiteText: {
    color: 'white',
  },
  imageIcon: {
    maxHeight: '50%',
  },
  paddingBottom: {
    paddingBottom: '65px',
  },
  paddingTop: {
    paddingTop: '65px',
  },
  bodyIcon: {
    fontSize: '90px',
    paddingBottom: '10px',
    paddingTop: '10px',
  },
  contIcon: {
    width: '100%',
    left: '0',
    right: '0',
  },
  noShadow: {
    border: 'none',
    boxShadow: 'none',
    backgroundColor: 'transparent',
  },
  extendedIcon: {
    fontSize: '50px',
  },
  fab: {
    margin: '10px 90px 80px 10px',
    bottom: '0',
    right: '0',
    position: 'fixed',
    padding: '45px',
  },
  fabSmall: {
    margin: '10px 45px 70px 10px',
    bottom: '0',
    right: '0',
    position: 'fixed',
    padding: '35px',
  },
}));

export const ReservationPage: FC = () => {
  const classes = useStyles();

  const [open, setOpen] = React.useState(false);

  const handleClickOpen = (): void => {
    setOpen(true);
  };

  const handleClose = (): void => {
    setOpen(false);
  };

  return (
    <Grid container direction="column" className={classes.paddingBottom}>
      <div className={classes.root}>
        <CssBaseline />

        <Grid item>
          <NavBar />
        </Grid>


        <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Book New Reservation</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Write here below the details of your next reservation
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Name Reservation"
            type="text"
            fullWidth
          />
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Date"
            type="date"
            fullWidth
            InputLabelProps={{ shrink: true }}
          />
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Department Time"
            type="time"
            fullWidth
            InputLabelProps={{ shrink: true }}
          />
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Destination"
            type="text"
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary" variant="contained">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>


        <MuiThemeProvider theme={themeResp}>
          <Grid item container className={classes.paddingBottom}>
            <Grid item xs={1} md={2} lg={2} />

            <Grid item xs={10} md={6} lg={4}>
              <Typography variant="h2" className={classes.whiteText}>
                Plan Here Your
              </Typography>
              <Typography variant="h1" className={classes.whiteText}>
                RESERVATIONS
              </Typography>
            </Grid>

            <Grid item xs={1} />
          </Grid>
        </MuiThemeProvider>
      </div>

      <Hidden mdDown>
        <Fab
          color="primary"
          size="large"
          aria-label="add"
          className={classes.fab}
          onClick={handleClickOpen}
        >
          <AddIcon className={classes.extendedIcon} />
        </Fab>
      </Hidden>

      <Hidden lgUp>
        <Fab
          color="primary"
          size="small"
          aria-label="add"
          className={classes.fabSmall}
        >
          <AddIcon />
        </Fab>
      </Hidden>

      <Grid item container className={classes.paddingTop}>
        <Grid item xs={2} />
        <Grid item xs={8}>
          <Typography variant="h3">Your Next Reservations</Typography>
        </Grid>
        <Grid item xs={2} />
      </Grid>

      <Grid item container style={{ paddingTop: '20px' }}>
        <Grid item xs={1} lg={2} />
        <Grid item xs={10} lg={8}>
          <Reservation />
        </Grid>
        <Grid item xs={1} lg={2} />
      </Grid>

      <Grid item container style={{ paddingTop: '20px' }}>
        <Grid item xs={1} lg={2} />
        <Grid item xs={10} lg={8}>
          <Reservation />
        </Grid>
        <Grid item xs={1} lg={2} />
      </Grid>

      <Grid item container style={{ paddingTop: '20px' }}>
        <Grid item xs={1} lg={2} />
        <Grid item xs={10} lg={8}>
          <Reservation />
        </Grid>
        <Grid item xs={1} lg={2} />
      </Grid>

      <Grid item container className={classes.paddingTop}>
        <Grid item xs={2} />
        <Grid item xs={8}>
          <Typography variant="h3" align="right">
            Your Past Reservations
          </Typography>
        </Grid>
        <Grid item xs={2} />
      </Grid>

      <Grid item container style={{ paddingTop: '20px' }}>
        <Grid item xs={1} lg={2} />
        <Grid item xs={10} lg={8}>
          <Reservation />
        </Grid>
        <Grid item xs={1} lg={2} />
      </Grid>
    </Grid>
  );
};