@material-ui/core#Container JavaScript Examples

export function Register() {
  const classes = useStyles();
  const queryParams = useQueryParams();
  const isAddAccount = !!queryParams.get("add");
  const history = useHistory();

  return (
    <Layout>
      <div className={classes.root}>
        <TitleLogo />

        <Container maxWidth="xs" className={classes.container}>
          {isAddAccount && (
            <Box display="flex" alignItems="center" justifyContent="space-between" marginBottom="1rem">
              <LinkTo onClick={() => history.goBack()}>Back</LinkTo>
              <Typography variant="h6">
                Add account
              </Typography>
            </Box>
          )}

          <Button className={classes.spacing} variant="outlined" component={Link} to={UrlService.newWallet(isAddAccount)} color="primary">
            Create new account
          </Button>
          <Button className={classes.spacing} variant="outlined" component={Link} to={UrlService.walletImport(isAddAccount)} color="primary">
            Import existing account
          </Button>

          <Box marginTop="1rem" textAlign="center">
            <Typography variant="caption" color="textSecondary">
              All sensitive information is stored only on your device.
            </Typography>
          </Box>
        </Container>
      </div>
    </Layout>
  );
}

function ConnectWalletPage() {
  const classes = useStyles();
  return (
    <div>
      <div className="Title">
        <h1 className="navbar-logo">
          Alternative Uniswap Interface
        </h1>
      </div>

      <Container>
        <Paper className={classes.paperContainer}>
          <Typography
            variant="h6"
            className={classes.title}
            color="common.white"
          >
            Please connect an Ethereum wallet to your browser to use the
            application
          </Typography>
        </Paper>
      </Container>

      <Grid
        container
        className={classes.footer}
        direction="row"
        justifyContent="center"
        alignItems="flex-end"
      >
        <p>
          Alternative Uniswap Interface | Get AUT for use in the bakerloo testnet{" "}
          <a href="https://faucet.bakerloo.autonity.network/">here</a>
        </p>
      </Grid>
    </div>
  );
}

export default function Login() {
  const iRef = useRef();
  const setUser = useContext(DispatchUserContext);
  function handleSubmit(e) {
    e.preventDefault();
    setUser({ id: v4(), name: iRef.current.value });
  }

  return (
    <Container maxWidth="sm">
      <Box textAlign="center" pt={4}>
        <form onSubmit={handleSubmit}>
          {/* <label>Name:</label> */}
          <TextField
            id="outlined-basic"
            label="Enter your name"
            variant="outlined"
            inputRef={iRef}
            required
          />
          <Box py={4}>
            <Button type="submit" variant="contained" color="primary">
              Submit
            </Button>
          </Box>
        </form>
      </Box>
    </Container>
  );
}

UsersFilter = () => {
  const classes = useStyles();
  // Grabs all user profile information

  return (
    <Container className={classes.root}>
      <p>FEATURE COMING SOON!!!</p>
      <p>Construct a customized filter panel on this page</p>
      <p>For example, find all registered users</p>
      <p>who have signed up for an event and have a certain disability</p>
    </Container>
  );
}

GrantsPage = () => {
  //======Access state from reducer for GrantsPage======
  const grants = useSelector((state) => {
    return state.grants.grants;
  });

  const classes = useStyles();

  return (
    <div className={classes.container}>
      <Container className={classes.appHeader}>
        {!grants || grants.length < 1 ? (
          <Loader />
        ) : (
          grants.map((grant) => {
            return (
              <div className="Card-display" key={grant.id}>
                <br />
                <GrantCard data={grant} />
              </div>
            );
          })
        )}
      </Container>
    </div>
  );
}

function LogoutPage() {
  const classes = useStyles();
  const auth = useAuth();
  const history = useHistory();

  useEffect(() => {
    auth.signOut().then(() => {
      history.replace('/');
    });
  }, [auth, history]);

  return (
    <Container maxWidth="md">
      <Helmet>
        <title>Logging Out</title>
      </Helmet>
      <Paper className={classes.paper}>
        <Typography
          variant="h5"
          align="center"
          color="textPrimary"
          gutterBottom>
          Logging out...
        </Typography>
        <LinearProgress />
      </Paper>
    </Container>
  );
}

function ErrorPage() {
	return (
		<div className="error-section">
			<Container>
				<Typography variant="h2" className="error-msg">Oops! Looks like there is nothing on this URL!</Typography>
			</Container>
		</div>
	)
}

export function UserShow(props) {
  return (
    <Container>
      <PageTitle text={`담당자 상세보기`} align="left"/>
      <Box>
        content
      </Box>
    </Container>
  )
}

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

    return (
        <Container component="main" className={`${classes.main}`} maxWidth="sm">
            <Typography variant="h2" component="h1" gutterBottom>
                <TextDecrypt text={`${Resume.basics.x_title} ${FirstName}`} />
            </Typography>
            <Typography variant="h5" component="h2" gutterBottom>
                <TextDecrypt text={`a ${Resume.basics.job}`} />
                <TextDecrypt text={`from ${Resume.basics.location.country}`} />
            </Typography>
        </Container>
    );
}

ProductDetails = ({ product }) => {
  const classes = useStyles()

  return (
    <Container maxWidth="lg" className={classes.root}>
      <Box m="1rem">
        <Typography variant="h4" align="left" >{product.name}</Typography>
      </Box>
      <Grid container spacing={2}>
        <Grid item>
          <div className={classes.image}>
            <img className={classes.img} alt="complex" src='/images/mask.jpeg' />
          </div>
        </Grid>
        <Grid item sm container>
          <Grid item>
            <Typography variant="body1" component="p" position={'right'}>{product.description}</Typography>
          </Grid>
        </Grid>
      </Grid>
    </Container>
  )
}

// ----------------------------------------------------------------------

export default function Blog() {
  return (
    <Page title="Dashboard: Blog | Minimal-UI">
      <Container>
        <Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
          <Typography variant="h4" gutterBottom>
            Blog
          </Typography>
          <Button
            variant="contained"
            component={RouterLink}
            to="#"
            startIcon={<Icon icon={plusFill} />}
          >
            New Post
          </Button>
        </Stack>

        <Stack mb={5} direction="row" alignItems="center" justifyContent="space-between">
          <BlogPostsSearch posts={POSTS} />
          <BlogPostsSort options={SORT_OPTIONS} />
        </Stack>

        <Grid container spacing={3}>
          {POSTS.map((post, index) => (
            <BlogPostCard key={post.id} post={post} index={index} />
          ))}
        </Grid>
      </Container>
    </Page>
  );
}

export default function Layout({ children, noAppBar }) {
    return (
        <Container className={styles.layout}>
            {
                !noAppBar &&
                <AppBar position="static" className={styles.appbar}>
                    <Toolbar classes={{ root: styles.toolbarRoot }}>
                        <img src="/hacktoberfest.svg" className={styles.hacktoberfestLogo} />
                        <Typography className={styles.hacktoberfestText}>acktoberfest 2020</Typography>
                        <img src="/sponsors-light.svg" className={styles.appbarSponsors} />
                    </Toolbar>
                </AppBar>
            }
            {children}
            <footer className={styles.footer}>Proudly hosted on <a className={styles.footerLink} href="https://vercel.com" target="_blank">▲Vercel</a></footer>
        </Container>
    )
}

Header = () => {
    
    return(
    <Container>
        <Grid container className={styles.header}  wrap="wrap-reverse" justifyContent="center" spacing={2}>
            <Grid item container direction="column" xs={12} md justifyContent="center" component="div">
                <Grid item style={{marginBottom : "2em"}}><Typography variant="h5" component="h5">Creation through <Box style={{display : 'inline'}} color="primary.main">Collaboration</Box></Typography></Grid>
                <Grid item><Typography variant="h6" component="h6">Developer Student Clubs BPPIMT</Typography></Grid>
                <Grid item><Typography variant="body2">DSC BPPIMT provides a platform which aims for the growth and advancement of the student community in the field of technology by providing peer-to-peer learning environment by conducting workshops , webinars and events , providing hands on experiences.</Typography></Grid>
                <Grid item style={{margin : '2em 0px'}}>
                    <Button variant="contained" color="primary" style={{marginRight : '.5em', marginTop : '.5em'}} onClick={() => window.open('https://dsc.community.dev/bp-poddar-institute-of-management-and-technology/')}>Become a Member</Button>
                    <Link href="/about"><Button variant="outlined" color="primary" style={{marginTop : '.5em'}}>Learn More</Button></Link>
                </Grid>
            </Grid>
            <Grid item xs={12} md style={{display : 'flex', alignItems : 'center'}}><TeamArt style={{width : "100%", height : '80%'}}/></Grid>
        </Grid>
    </Container>)
}

PostDetail = ({ postToDisplay, handleVote, getPostInformationOnLoad }) => {
  return (
    <Container width="sm">
      <Post
        id={postToDisplay._id}
        title={postToDisplay.title}
        content={postToDisplay.body}
        authorId={postToDisplay.author}
        key={`${postToDisplay.id}-key`}
        upvotes={postToDisplay.upvotes_laugh}
        downvotes={postToDisplay.upvotes_sad}
        claps={postToDisplay.upvotes_clap}
        handleVote={handleVote}
        frontpage={false}
        loadPost={getPostInformationOnLoad}
      />
    </Container>
  );
}

NotFoundPage = () => {
  const classes = useNotFoundPageStyles();

  return (
    <Container disableGutters>
      <Paper variant="outlined" className={classes.mainPaper}>
        <div className={classes.textWrapper}>
          <SvgIcon color="primary" className={classes.icon}>
            <Error404 />
          </SvgIcon>
          <Typography color="secondary" variant="h4">
            Page Not Found
          </Typography>
          <Typography color="secondary" variant="h6">
            The page you requested does not exist
          </Typography>
        </div>
      </Paper>
    </Container>
  );
}

Routes = () => {
  const [{ user }] = useAuthContext();
  const loggedUser = storageService.loadUser() || user;

  return (
    <Container disableGutters>
      <Switch>
        <Route exact path="/">
          {loggedUser ? (
            <>
              <TopPanel />
              <EntriesDisplay />
            </>
          ) : (
            <Redirect to="/login" />
          )}
        </Route>
        <Route exact path="/add_update">
          {loggedUser ? <AddUpdateForm /> : <Redirect to="/login" />}
        </Route>
        <Route exact path="/register">
          <RegisterForm />
        </Route>
        <Route exact path="/login">
          <LoginForm />
        </Route>
      </Switch>
    </Container>
  );
}

About = () => {
  const classes = useStyle();
  return (
    <Container>
      <Typography variant="h4" className={classes.contributers} component="h2">
        Contributers
      </Typography>
      {data.contributers.map((contributer) => (
        <Card className={classes.root} elevation={4}>
          <CardContent className={classes.content}>
            <Avatar alt="avatar" src={contributer.avatar_url}></Avatar>
            <Typography variant="h5" className={classes.name}>
              {contributer.name}
            </Typography>
          </CardContent>
          <CardActions className={classes.actions}>
            <IconButton href={contributer.username}>
              <GitHub className={classes.avatar} />
            </IconButton>
          </CardActions>
        </Card>
      ))}
    </Container>
  );
}

Index = props => {
    const classes = useStyles()

    return (
        <div className={classes.root}>
            <Container>
                <Grid container spacing={-2}>
                    <Grid item xs={6}>
                        <img src={question} alt="" width={"100%"}/>
                    </Grid>

                    <Grid item xs={6}>
                        <Typography variant={"h4"} className={classes.title}>
                            Create quizzes and share with the world!
                        </Typography>
                    </Grid>
                </Grid>

                <Button variant={"outlined"} className={classes.createButton} size={"large"}>
                    Create
                </Button>
            </Container>
        </div>
    )
}

EditorContainer = ({
    tabs,
    sidebar,
    className,
    containerClassname = '',
    children,
}) => {
    return (
        <Container
            maxWidth="lg"
            className={cn('editorContainer', containerClassname)}
        >
            <Paper
                tabs={tabs}
                className={'editorMainPaper'}
                paperClassName={cn('editorPaper', className)}
            >
                <div className={'editorMainContainer'}>
                    {children}
                </div>
            </Paper>
            {sidebar}
        </Container>
    );
}

Categories = () => {
    const Classes = useStyles();
    return (
        <div className="Box">
            <Container className={Classes.root}>
                <h1>Top categories</h1>
                <Grid container spacing={4}>
                    {categoriesCard}
                </Grid>
            </Container>
            <h1></h1>
        </div>
    );
}

function App() {
    useEffect(() => {
        const server_side_css = document.querySelector("#jss-server-side");
        if (server_side_css) {
            server_side_css.parentElement.removeChild(server_side_css);
        }
    }, []);

    return (
        <>
            <CssBaseline>
                <Container fixed>
                    <Switch>
                        <Redirect exact path="/" to="/algo" />

                        <Route
                            exact
                            path="/:page(algo|ds)"
                            render={(props) => <Algo {...props} />}
                        />

                        <Route
                            exact
                            path="/open"
                            render={(props) => <OpenFolder {...props} />}
                        />
                    </Switch>
                </Container>
            </CssBaseline>
        </>
    );
}

Footer = () => {
  return (
    <Fragment>
      <Paper
        elevation={0}
        style={{
          borderStyle: 'solid',
          borderWidth: '1px 0px 0px 0px',
          borderColor: 'grey',
          backgroundColor: 'inherit',
          color: ' inherit',
          width: '100%',
          height: '2%',
          bottom: 0,
          overflowX: 'hidden',
          textAlign: 'right',
        }}
      >
        <Container>
          <Hidden>
            <Grid>
              <h6>
                © Copyright 2020{' '}
                <span style={{ fontWeight: '500' }}>
                  DSC TIET | Developed with
                </span>{' '}
                ❤️
              </h6>
            </Grid>
          </Hidden>
        </Container>
      </Paper>
    </Fragment>
  );
}

App = () => {
  useTitle();
  const { inputFilters, filters, saveFilters } = useFilters();
  const {
    onCloseShareModal,
    showShareDialog,
    openShareDialog,
    shareFilters,
  } = useShare(filters);

  const result = useCalculation({ filters });

  return (
    <>
      <Container maxWidth="md">
        <Title />
        <Box mx={[-1.5, 0]}>
          <Filter
            filters={inputFilters}
            onChange={saveFilters}
            openShareDialog={openShareDialog}
          />
          <Chart {...result} />
          <Table {...result} />
          <Footer />
        </Box>
      </Container>
      <ShareDialog
        open={showShareDialog}
        filters={shareFilters}
        onClose={onCloseShareModal}
      />
    </>
  );
}

MissionImage = ({ classes, mission }) => {
  const imageUrl = mission?.image;
  if (!imageUrl) return null;

  return (
    <Container>
      <img src={imageUrl} className={classes.missionImage} alt="details" />
    </Container>
  );
}

export default function NotFound () {
  const classes = useStyles()

  useEffect(() => {
    document.title = 'Not Found - EDA '
  })

  return (
    <Container maxWidth="lg" className={classes.header}>
      <Typography variant="h1" align="center" gutterBottom>
        404 Not Found
      </Typography>
      <Typography
        variant="h4"
        align="center"
        color="textSecondary"
        gutterBottom
      >
        Sorry, Requested page not found
      </Typography>
    </Container>
  )
}

BusinessProfilePage = () => {
  const { query } = useRouter();
  const { loading, error, data } = useQuery(businessBySlug, {
    variables: { businessSlug: query.slug },
  });
  const classes = useStyles();
  if (error) return <h1>Error...</h1>;
  if (loading) return <span>Loading...</span>;
  if (data && data.allBusinesses.length > 0) {
    const business = data.allBusinesses[0];
    console.log(business);
    console.log(classes.heroBanner);
    return (
      <HomePageLayout>
        <AppNav />
        <HeroHeader image={business.heroImage.publicUrl} />
        <Container className={classes.root} maxWidth="lg">
          <h1>Business BY Slug</h1>
        </Container>
      </HomePageLayout>
    );
  } else {
    return <h1>Not found ${query.slug}</h1>;
  }
}

AdminApp = () => {
  const classes = useStyles();
  return (
    <Box display="flex" width={1} height="100%">
      <CssBaseline />
      <Drawer
        open
        variant="persistent"
        classes={{ paper: classes.drawer }}
        PaperProps={{ elevation: 4 }}
      >
        <Box className={classes.logo} display="flex" alignItems="center">
          <NavLink to="/">{logo}</NavLink>
        </Box>
        <AdminNavigation />
      </Drawer>
      <Box width={1} className={classes.main}>
        <AppBar position="relative" elevation={2}>
          <Toolbar />
        </AppBar>
        <Container className={classes.content}>
          <Box mt={2}>
            <Switch>
              <Route path="/admin/dashboard" component={DashboardPage} />
              <Route path="/admin/applications" component={ApplicationPage} />
            </Switch>
          </Box>
        </Container>
      </Box>
    </Box>
  );
}

Pagination = (props) => {
  const classes = useStyles();
  const isNextButtonDisabled = props.actualPage === props.pagesCount;
  const isPrevButtonDisabled = props.actualPage === 1;
  return (
    <Container className={classes.pagination} maxWidth='md'>
      <button
        className={classes.paginationButton}
        onClick={props.onPrev}
        disabled={isPrevButtonDisabled}
        style={{ opacity: isPrevButtonDisabled ? 0 : 1 }}
      >
        <span>&larr;</span> Previous
      </button>
      <span className={classes.paginationCount}>
        {`Page ${props.actualPage} of ${props.pagesCount}`}
      </span>
      <button
        className={classes.paginationButton}
        onClick={props.onNext}
        disabled={isNextButtonDisabled}
        style={{
          opacity: isNextButtonDisabled ? 0 : 1,
        }}
      >
        Next <span>&rarr;</span>
      </button>
    </Container>
  );
}

Layout = (props) => {
  return (
    <Provider store={ store }>
      <Header />
      <Container maxWidth="lg" className="container">
        <ConnectedRouter history={history}>
          <ChatListContainer />
          <Switch>
            <Route path='/' exact>Main page</Route>
            <Route path='/profile'>Profile page</Route>
            <Route path='/chats' exact>
              <Redirect to="/chats/1" />
            </Route>
            <Route path='/chats/:id' exact component={ ChatContainer } />
            <Route path='/about'>About page</Route>
            <Route path='/contacts'>Contacts page</Route>
            <Route path='/'>404 page</Route>
          </Switch>
        </ConnectedRouter>

      </Container>
    </Provider>
  )
}