import React from 'react';
import { makeStyles } from '@material-ui/styles';
import { Grid } from '@material-ui/core';
import Layout from "../components/templates/Layout";
import AccountProfile from "../components/organisms/AccountProfile";
import AccountVideoPres from "../components/organisms/AccountVideoPres";

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(4)
  }
}));

const Account = () => {
  const classes = useStyles();

  return (
    <Layout>
      <div className={classes.root}>
      <Grid
        container
        spacing={4}
        direction="row"
        justify="space-between"
        alignItems="flex-start"
      >
        <Grid
          item
          lg={4}
          md={6}
          xl={4}
          xs={12}
        >
          <AccountProfile />
          <div><br/></div>
          <AccountVideoPres />
        </Grid>
        <Grid
          item
          lg={8}
          md={6}
          xl={8}
          xs={12}
        >
          
        </Grid>
        
      </Grid>
    </div>
    </Layout>
  );
};

export default Account;