@material-ui/core#Container TypeScript Examples

AuthContainer = ({ children, maxWidth = "lg" }: AuthContainerProps) => {
  const classes = useStyles();

  const isXs = useMediaQuery((theme: Theme) => theme.breakpoints.down("xs"));

  return (
    <div className={classes.root}>
      <Container maxWidth={maxWidth} disableGutters={isXs}>
        <Paper elevation={0} className={classes.paper}>
          {children}
        </Paper>
      </Container>
    </div>
  );
}

function App() {
    return (
        <div className="App" style={{ width: '100%', height: '100%' }}>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <Container maxWidth="md">
                    <OverclockingCard />
                    <MonitoringCard />
                    <ButtonMappingCard />
                    <CMLogo />
                </Container>
            </ThemeProvider>
        </div>
    );
}

export default function Footer() {
  return (
    <Container maxWidth="sm" style={{ marginTop: 50 }}>
      <Typography variant="body2" color="textSecondary" align="center">
        Built by
        <a
          style={{ textDecoration: "none" }}
          target="_blank"
          rel="noopener noreferrer"
          href="https://cypress.io"
        >
          <CypressLogo
            style={{
              marginTop: -2,
              marginLeft: 5,
              height: "20px",
              width: "55px",
              verticalAlign: "middle",
            }}
          />
        </a>
      </Typography>
    </Container>
  );
}

Home = () => {
  const classes = useStyles();
  const { stories } = useContext(StoriesContext);

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Latest Stories
        </Typography>
        <div className={classes.root}>
          <List component="span" aria-label="stories">
            {stories?.map((s) => (
              <ListItem key={s.timestamp}>
                <Story {...s} />
              </ListItem>
            ))}
          </List>
        </div>
      </div>
    </Container>
  );
}

PageContainer = withStyles((theme) => ({
  root: {
    paddingTop: theme.spacing(3),
    paddingBottom: theme.spacing(3),
    flex: 1,
    overflow: 'hidden scroll',
    display: 'flex',
    flexDirection: 'column',
  },
}))(Container)

Content = () => {
  const collection = useSelector(collectionDetailsSelector);
  const collectionLoading = useSelector(collectionLoadingSelector);
  const collectionErrored = useSelector(collectionErrorSelector);

  if (collectionLoading) {
    return <LinearProgress />;
  }

  if (collectionErrored) {
    return <FullScreenMessage message="Collection not found" />;
  }

  if (collection?.sites.length === 0) {
    return (
      <FullScreenMessage message="There are no sites in your dashboard. Add sites to your dashboard to monitor multiple locations in a single view." />
    );
  }

  return collection ? (
    <Container>
      <Header collection={collection} />
      <Grid container justify="center" spacing={2}>
        <Grid item xs={12} sm={11} md={6}>
          <Map collection={collection} />
        </Grid>
        <Grid item xs={12} sm={11} md={6}>
          <Info collection={collection} />
        </Grid>
      </Grid>
      <Table collection={collection} />
    </Container>
  ) : null;
}

Page: NextPage<Props> = ({ page }) => {
  if (page == null) {
    return <Error statusCode={404} />;
  }
  return (
    <Layout>
      <NextSeo
        title={page.seo?.title ?? ''}
        description={page.seo?.metaDesc ?? ''}
        openGraph={{
          title: page.seo?.opengraphTitle ?? '',
          description: page.seo?.opengraphDescription ?? '',
        }}
      />
      <Hero image={page.featuredImage?.node} title={page.title} />
      <Container>
        <Box sx={{ mb: 6, mt: 4 }}>
          <BlockRenderer>{page.content}</BlockRenderer>
        </Box>
      </Container>
    </Layout>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <AuthWrapper>
      <ApolloWrapper>
        <ThemeProvider theme={theme}>
          <CssBaseline>
            <Container maxWidth="sm" style={{ marginTop: "30px" }}>
              <Suspense fallback={<FishbowlLoading />}>
                <App />
              </Suspense>
            </Container>
          </CssBaseline>
        </ThemeProvider>
      </ApolloWrapper>
    </AuthWrapper>
  </React.StrictMode>,
  document.getElementById("root")
)

AlertInstructionsLayout = ({
  title,
  children,
}: PropsWithChildren<AlertInstructionsLayoutProps>) => {
  const classes = useStyles();
  return (
    <CostInsightsThemeProvider>
      <ConfigProvider>
        <CurrencyProvider>
          <Page themeId="tool">
            <Header
              title="Cost Insights"
              pageTitleOverride={title}
              type="Tool"
            />
            <Container maxWidth="md" disableGutters className={classes.root}>
              <Box mb={3}>
                <Button
                  variant="outlined"
                  startIcon={<ChevronLeftIcon />}
                  href="/cost-insights"
                >
                  Back to Cost Insights
                </Button>
              </Box>
              {children}
            </Container>
          </Page>
        </CurrencyProvider>
      </ConfigProvider>
    </CostInsightsThemeProvider>
  );
}

export default function MyApp({ Component, pageProps }: AppProps) {
  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Multi-Step Form</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <AppBar position="fixed">
          <Toolbar variant="dense">
            <Typography variant="h6">Multi-Step Form</Typography>
          </Toolbar>
        </AppBar>

        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Container>
          <Box marginTop={10}>
            <Component {...pageProps} />
          </Box>
        </Container>
      </ThemeProvider>
    </React.Fragment>
  );
}

render() {
    return (
      <Container maxWidth={this.props.maxWidth}>
        <Grid container alignItems='baseline' className={this.props.classes.container}      >
          {React.Children.map(this.props.children, (content, index) => {
            return (
              <Grid
                key={content?.['key'] || index} item
                xs={6}
                sm={4}
                md={3}
                xl={2}
                className={this.props.classes.content}
              >
                {content}
              </Grid>
            )
          })}
        </Grid>
      </Container>
    );
  }

function TabPanel(props:any) {
	const { children, value, index, ...other } = props;

	return (
		<div
			role="tabpanel"
			hidden={value !== index}
			id={`scrollable-auto-tabpanel-${index}`}
			aria-labelledby={`scrollable-auto-tab-${index}`}
			{...other}
		>
			{value === index && (
				<Box p={3}>
					<Container maxWidth="md">
						{children}
					</Container>
				</Box>
			)}
		</div>
	);
}

Dashboard = (props: Props): ReactElement => {
  const classes = useStyles()

  const { isLoading } = useContext(Context)

  return (
    <div style={{ display: 'flex' }}>
      <SideBar />
      <Container className={classes.content}>
        <ErrorBoundary>
          <>
            {isLoading ? (
              <div style={{ textAlign: 'center', width: '100%' }}>
                <CircularProgress />
              </div>
            ) : (
              props.children
            )}
          </>
        </ErrorBoundary>
      </Container>
    </div>
  )
}

App = () => {
  const { token } = useAppState()
  const { setToken, showSettings } = useActions()
  return (
    <Container>
      <Box p={4} display="grid" gridGap="1rem" component={Paper}>
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <Typography variant="h1">GitHub Deploy Center</Typography>
          <IconButton title="Settings" onClick={() => showSettings()}>
            <Icon>settings</Icon>
          </IconButton>
        </Box>
        <TextField
          label="Personal Access Token"
          value={token}
          onChange={(e) => setToken(e.target.value)}
          type="password"
        />
        {token && (
          <>
            <ManageApplicationsView />
            <SelectApplicationView />
            <EnvironmentsView />
            <ReleasesTableView />
            <NewApplicationDialog />
            <EditApplicationDialog />
            <DeploymentDialog />
          </>
        )}
      </Box>
      <SettingsDialog />
      <ModalContainer />
    </Container>
  )
}

function Footer(): React.ReactElement<{}> {
  const classes = useStyles();
  const year = new Date().getFullYear();

  return (
    <Container className={classes.container} maxWidth='xl'>
      <Typography variant='caption' className={classes.body}>
        Made with React and GraphQL | Copyright {year}
      </Typography>
    </Container>
  );
}

Settings = () => {
  const { isDeleteConfirmation, changeDeleteConfirm } = useContext(
    DeleteConfirmContext
  )!;
  const { isDark, changeTheme } = useContext(ThemeContext)!;
  const { isSmallText, changeSmallText } = useContext(SmallTextContext)!;
  const matches = useMediaQuery("(max-width: 768px)");

  return (
    <>
      <Container>
        <h3>
          Dark Mode:
          <Switch onChange={changeTheme} checked={isDark} color="primary" />
        </h3>
        <h3>
          Small Text Mode:
          <Switch
            onChange={changeSmallText}
            checked={isSmallText}
            color="primary"
            disabled={matches}
          />
        </h3>
        <h3>
          Disable Delete Confirmation:
          <Switch
            onChange={changeDeleteConfirm}
            checked={isDeleteConfirmation}
            color="primary"
          />
        </h3>
      </Container>
    </>
  );
}

Home = () => {
  const classes = useStyles();
  const i18n = useI18n();
  const config = useConfig();
  const router = useRouter();

  return (
    <Container>
      <Logo />
      <Typography variant={'h5'} gutterBottom={true} align="center">
        {i18n.translateToString('Headline', {
          appName: config.getConfig<ProjectConfig, {}>().project.appName,
        })}
      </Typography>

      <Typography variant={'h6'} className={classes.congratulation}>
        {i18n.translate('Congratulation')}
      </Typography>
      <Typography className={classes.centered}>{i18n.translate('DescriptionStart')}</Typography>
      <Box m={3} className={classes.centered}>
        <Button variant="contained" color="secondary" onClick={() => router.navigate(router.linkTo('demoContent'))}>
          {i18n.translateToString('ReadMore')}
        </Button>
      </Box>
    </Container>
  );
}

export function Page({
    toc,
    children,
}: {
    toc?: TableOfContentsItem[]
    children: React.ReactNode
}): React.ReactElement {
    const classes = useStyles()
    const [container, setContainer] = useState<HTMLElement | null>(null)

    return (
        <Paper ref={setContainer} elevation={0} className={classes.container}>
            <Container maxWidth="md" className={classes.inner}>
                <Box className={classes.box}>
                    {children}

                    <footer>
                        <Typography
                            color="textSecondary"
                            variant="body2"
                            className={classes.footer}
                        >
                            &copy; MTCute TL reference. This website is{' '}
                            <MuiLink href="https://github.com/mtcute/mtcute/tree/master/tl-reference">
                                open-source
                            </MuiLink>{' '}
                            and licensed under MIT.
                            <br />
                            This website is not affiliated with Telegram.
                        </Typography>
                    </footer>
                </Box>
            </Container>
            {toc && <TableOfContents items={toc} container={container} />}
        </Paper>
    )
}

EditAclDialog: React.FC<EditAclDialog> = props => {
  const { onClose, open, onTextChange } = props;
  const [text, setText] = useState('');
  const { t } = useTranslation();
  const classes = useStyles();

  const setTextInfo = useCallback((attr: keyof Settings, event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(event.target.value);
  }, []);

  const onCloseDialog = () => {
    onTextChange('acl', { target: { value: text } } as React.ChangeEvent<HTMLTextAreaElement>);
    onClose('');
  }

  return (
    <AdaptiveDialog onClose={onCloseDialog} open={open}>
      <DialogTitle attr='' onClose={onCloseDialog}>{t('acl_settings')}</DialogTitle>
      <Container className={classes.container}>
        <StyledTextareaAutosize rows={10} placeholder={tips} onTextChange={setTextInfo}/>
      </Container>
    </AdaptiveDialog>
  );
}

BoxUI = ({ children }: BoxUIProps) => {
  const classes = useStyles();
  const { drawer } = useGUIContext();

  return (
    <Container className={`${classes.ui} ${drawer}`}>
      <Paper elevation={24}>{children}</Paper>
    </Container>
  );
}

Questionnaire = (props: QuestionnaireProps) => {
    const classes = useStyles();
    const links = props.links.map((x) => {
        return (
            <Link key={x.title} onClick={x.onClick}>
                {x.title}
            </Link>
        );
    });

    return (
        <Container maxWidth="xs" className={classes.root}>
            <CssBaseline />
            <div className={classes.paper}>
                <Avatar className={classes.avatar}>{props.avatorIcon}</Avatar>
                <Typography variant="h4" className={classes.title}>
                    {props.title}
                </Typography>

                <div>{props.forms}</div>

                <Divider style={{ width: "50%" }} />
                <div style={{ display: "flex", flexDirection: "column" }}>{links}</div>

                <Divider style={{ width: "50%" }} />
                <Copyright />
            </div>
        </Container>
    );
}

export default function HomeNavigation({
  children,
  open,
  setOpen,
  handleCreateTable,
}: IHomeNavigationProps) {
  const classes = useStyles();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <Grid
      container
      wrap="nowrap"
      alignItems="flex-start"
      className={clsx(open && classes.open)}
    >
      <Grid item className={classes.navDrawerContainer}>
        <NavDrawer
          open={open}
          onClose={() => setOpen(false)}
          handleCreateTable={handleCreateTable}
        />
      </Grid>

      <Grid item xs>
        <AppBar
          color="inherit"
          elevation={trigger ? 4 : 0}
          className={classes.appBar}
        >
          <Container>
            <Toolbar className={clsx(classes.maxHeight, classes.toolbar)}>
              <IconButton
                aria-label="Open navigation drawer"
                onClick={() => setOpen(true)}
                edge="start"
                className={classes.openButton}
              >
                <MenuIcon />
              </IconButton>

              <div className={classes.logo}>
                <FiretableLogo />
              </div>

              <UserMenu />
            </Toolbar>
          </Container>
        </AppBar>

        {children}
      </Grid>
    </Grid>
  );
}

App = (props: AppProps) => {
  return (
    <div>
      <AnalyticsProvider />
      <MainAppBar
        authContainer={props.authContainer}
        connectionContainer={props.connectSignerContainer}
      />
      <Container>
        <Alerts {...props} />
        <Switch>
          <Route
            exact
            path={Pages.Home}
            render={_ => (
              <Home
                authContainer={props.authContainer}
                homeContainer={props.homeContainer}
                connectionContainer={props.connectSignerContainer}
              />
            )}
          />
          <Route
            exact
            path={Pages.AccountManagement}
            render={_ => (
              <AccountManagementPage authContainer={props.authContainer} />
            )}
          />
          <Route
            path={Pages.ImportAccount}
            exact
            render={_ => (
              <AccountPage
                errors={props.errors}
                action={'Import'}
                authContainer={props.authContainer}
              />
            )}
          />
          <Route
            path={Pages.CreateAccount}
            exact
            render={_ => (
              <AccountPage
                errors={props.errors}
                action={'Create'}
                authContainer={props.authContainer}
              />
            )}
          />
          <Route
            path={Pages.SignMessage}
            exact
            render={_ => (
              <SignMessagePage
                signMessageContainer={props.signMessageContainer}
                authContainer={props.authContainer}
              />
            )}
          />
          <Route
            path={Pages.ConnectSigner}
            exact
            render={_ => (
              <ConnectSignerPage
                connectSignerContainer={props.connectSignerContainer}
              />
            )}
          />
        </Switch>
      </Container>
    </div>
  );
}

PaddingOracle = (props: IChallengeProps) => {

  const classes = useStyles();
  const [isAdmin, setIsAdmin] = useState(false);
  const layoutContext = useContext(LayoutContext);

  const checkPermissions = () => {
    layoutContext.setLoading(true);

    PaddingOracleService.isAdmin().then((res: any) => {
      setIsAdmin(res.isAdmin);
      props.setFlag(res.flag);
      layoutContext.setLoading(false);
    }).catch(() => layoutContext.setLoading(false));
  };


  useEffect(() => {
    layoutContext.setLoading(true);

    PaddingOracleService.init().then(() => {
      checkPermissions();
      layoutContext.setLoading(false);
    }).catch(() => layoutContext.setLoading(false));
  }, []);


  let notAuthorized;
  if (!isAdmin) notAuthorized = <img alt="You shall not pass" src={notAuthorizedImg} />;

  return (
    <div>
      <Container>
        <Box className={classes.imageContainer}>
          {notAuthorized}
        </Box>
        <Box textAlign={"center"}>
          <Typography variant="h5">Sorry, this page is for Admins only</Typography>
          <Typography variant="h5">You are not allowed here</Typography>
        </Box>
        <Box className={classes.permissionContainer}>
          <Typography>
            Check my permissions again
            <IconButton onClick={checkPermissions} color="primary" aria-label="delete">
              <RefreshIcon />
            </IconButton>
          </Typography>
        </Box>
      </Container>




    </div>
  );
}

function App() {
  const [isFirebaseInit, setIsFirebaseInit] = useState(false);

  useEffect(() => {
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    if (process.env.NODE_ENV === 'production') {
      firebase.analytics();
    }

    setIsFirebaseInit(true);
  }, []);

  useEffect(() => {
    document.addEventListener('service_worker_updated', () => {
      // handle this more gracefully.
      // window.location.reload();
    })
  });

  return <>
    <Switch>

      <Route exact={true} path="/">
        <Suspense fallback={<RouteLoadingFallback />}>
          <Homepage />
        </Suspense>
      </Route>

      <UserProvider isFirebaseInit={isFirebaseInit}>
        <Route path="/login">
          <Navbar />
          <Container className="app-container" maxWidth="lg">
            <div className="app">
              <Suspense fallback={<RouteLoadingFallback />}>
                <Login />
              </Suspense>
            </div>
          </Container>
        </Route>

        <Route path="/rooms">
          <Navbar />
          <Container className="app-container" maxWidth="lg">
            <div className="app">
              <Suspense fallback={<RouteLoadingFallback />}>
                <Rooms />
              </Suspense>
            </div>

          </Container>
        </Route>

        <Route path="/game">
          {window.screen.width > 600 ? <Navbar /> : null}
          <Container className="app-container game" maxWidth="xl">
            <div className="app game-app">
              <Suspense fallback={<RouteLoadingFallback />}>
                <Game />
              </Suspense>
            </div>
          </Container>
        </Route>
      </UserProvider>
    </Switch>
  </>;
}

Add = () => {
  const { addStory } = useContext(StoriesContext);
  const classes = useStyles();
  const [title, setTitle] = useState('');
  const [link, setLink] = useState('');
  const history = useHistory();
  const user = useContext(UserContext);
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    switch (name) {
      case 'link':
        setLink(value);
        break;
      case 'title':
        setTitle(value);
        break;
    }
  };
  const handleSubmit = async () => {
    if (link && title && user?.email) {
      await addStory!({
        link,
        title,
        user: user.email,
        timestamp: Date.now(),
      });
      history.push('/');
    }
  };
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Add a Story
        </Typography>
        <div className={classes.form}>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="title"
            label="Title"
            name="title"
            autoComplete="title"
            autoFocus
            onChange={handleChange}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="link"
            label="Link"
            name="link"
            autoComplete="link"
            autoFocus
            onChange={handleChange}
          />
        </div>
        <Button
          type="submit"
          fullWidth
          variant="contained"
          color="primary"
          className={classes.submit}
          onClick={handleSubmit}
        >
          Submit
        </Button>
      </div>
    </Container>
  );
}

ModsPage: React.FunctionComponent = () => {
  const enabledMods = useRecoilValue(enabledModList);
  const installedMods = useRecoilValue(installedModList);
  const notInstalledMods = useRecoilValue(notInstalledModList);
  const requiredMods = useRecoilValue(requiredModList);
  const settings = useRecoilValue(settingsState);

  const isEmpty =
    enabledMods.length +
      requiredMods.length +
      installedMods.length +
      notInstalledMods.length ===
    0;

  const isAlphaMissingPath = settings.alphaMode && !settings.alphaPath;

  return (
    <PageContainer maxWidth={false}>
      <Container maxWidth="md">
        <ModsToolbar />
        {!isAlphaMissingPath && (
          <ModRowSection
            title={modsText.modSections.required}
            mods={requiredMods}
            highlighted
          />
        )}
        {isEmpty && (
          <Box mt={2}>
            <Card>
              <Typography variant="h6" align="center">
                {modsText.emptyModList}
              </Typography>
            </Card>
          </Box>
        )}
        {isAlphaMissingPath && (
          <Box mt={2}>
            <Card>
              <Typography variant="h6" align="center">
                {modsText.missingAlphaPath}
              </Typography>
            </Card>
          </Box>
        )}
        {!isAlphaMissingPath && (
          <>
            <ModRowSection
              title={modsText.modSections.enabled}
              mods={enabledMods}
            />
            <ModRowSection
              title={modsText.modSections.installed}
              mods={installedMods}
            />
            <ModRowSection
              title={modsText.modSections.notInstalled}
              mods={notInstalledMods}
            />
          </>
        )}
      </Container>
    </PageContainer>
  );
}

HomePage: FunctionComponent = () => {
  const classes = useStyles();

  return (
    <>
      <Head>
        {/* The title of the webpage as displayed in the tab name. */}
        <title>{t('pages:page-title')}</title>
      </Head>
      <Container maxWidth={false} className={clsx(classes.background)}>
        <div className={classes.homeHeader}>
          {/* Use a bare PNG image. No weird WEBP handling should prevent rendering this. */}
          <NextImage
            priority
            src={'/images/logo.png'}
            width={80}
            height={80}
            className={classes.logo}
            alt={t('pages:page-title')}
          />
          <Typography variant="h3">{t('pages:page-title')}</Typography>
        </div>
        <div className={classes.homeBody}>
          <Grid container justify="center" spacing={2}>
            <Grid item xs={4} style={{ display: 'none' }}>
              <Link href="/achievements">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-achievements')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
            <Grid item xs={4}>
              <Link href="/map">
                <Card className={classes.pageButtonLink}>
                  <CardContent>
                    <Typography variant="h2" className={classes.pageButtonText}>
                      {t('pages:page-map')}
                    </Typography>
                  </CardContent>
                </Card>
              </Link>
            </Grid>
          </Grid>
        </div>
        <div className={classes.homeFooter}>
          <Typography className={classes.subtitle}>
            {f('version-format', { version: getApplicationVersion() })}
          </Typography>
        </div>
      </Container>
    </>
  );
}

render() {
    const { classes = {} } = this.props
    return (
      <>
        <CssBaseline />
        <Container className={classes.layout}>
          <Grid container>
            <Grid item xs={12}>
              <Typography
                component="h1"
                noWrap
                className={classes.title}
                onClick={() => {
                  window.location.href = '/'
                }}
              >
                dockerstats.com
              </Typography>
            </Grid>

            <Grid item xs={12}>
              <Router>
                <main>
                  <Switch>
                    <Route
                      path="/hubs/docker/:org/:repo"
                      component={Statistics}
                    />
                    <Route path="/hubs/docker/:org" component={Statistics} />
                    <Route component={NoMatch} />
                  </Switch>
                </main>
              </Router>
            </Grid>

            <Grid item xs={12} className={classes.disclaimer}>
              <Typography variant="body2" className={classes.explanation}>
                Some image pull counters hit the int32 upper bound which is a
                Docker Hub bug that has been{' '}
                <a href="https://github.com/docker/hub-feedback/issues/2003">
                  reported on GitHub
                </a>
                . Dockerstats is an independent{' '}
                <a href="https://github.com/aeneasr/dockerstats">
                  research and hobby project
                </a>{' '}
                developed by <a href={'https://github.com/aeneasr'}>@aeneasr</a>
                . This project is in no way affiliated with Docker, Inc. Hosting
                sponsored by <a href={'https://www.ory.sh/'}>ORY</a>.
              </Typography>
            </Grid>
          </Grid>
        </Container>
      </>
    )
  }