anvil/striker-ui/pages/server/[uuid].tsx

import { useState } from 'react';
import { useRouter } from 'next/router';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

import PeriodicFetch from '../../lib/fetchers/periodicFetch';
import CPU from '../../components/CPU';
import Memory from '../../components/Memory';
import Resource from '../../components/Resource';
import { FullSize, Preview } from '../../components/Display';
import Header from '../../components/Header';
import Domain from '../../components/Domain';

const useStyles = makeStyles((theme) => ({
  child: {
    width: '22%',
    height: '100%',
    [theme.breakpoints.down('lg')]: {
      width: '25%',
    },
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
  server: {
    width: '35%',
    [theme.breakpoints.down('lg')]: {
      width: '25%',
    },
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
  container: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    [theme.breakpoints.down('md')]: {
      display: 'block',
    },
  },
}));

const Server = (): JSX.Element => {
  const [previewMode] = useState<boolean>(true);
  const classes = useStyles();

  const router = useRouter();
  const { uuid } = router.query;

  const { data } = PeriodicFetch<AnvilReplicatedStorage>(
    `${process.env.NEXT_PUBLIC_API_URL}/get_replicated_storage?server_uuid=${uuid}`,
  );

  return (
    <>
      <Header />
      {typeof uuid === 'string' &&
        data &&
        (previewMode ? (
          <Box className={classes.container}>
            <Box className={classes.child}>
              <Preview />
              <CPU />
              <Memory />
            </Box>
            <Box flexGrow={1} className={classes.server}>
              <Domain />
            </Box>
            <Box className={classes.child}>
              <Resource resource={data} />
            </Box>
          </Box>
        ) : (
          <Box className={classes.container}>
            <FullSize />
          </Box>
        ))}
    </>
  );
};

export default Server;