refactor: modify server page to allow different types of display depending on user input

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,7 +7,7 @@ import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import CPU from '../../components/CPU';
 import Memory from '../../components/Memory';
 import Resource from '../../components/Resource';
-import Display from '../../components/Display';
+import { FullSize, Preview } from '../../components/Display';
 import Header from '../../components/Header';
 import Domain from '../../components/Domain';
 
@@ -42,6 +43,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const Server = (): JSX.Element => {
+  const [previewMode] = useState<boolean>(true);
   const classes = useStyles();
 
   const router = useRouter();
@@ -54,21 +56,27 @@ const Server = (): JSX.Element => {
   return (
     <>
       <Header />
-      {typeof uuid === 'string' && data && (
+      {typeof uuid === 'string' &&
+        data &&
+        (previewMode ? (
           <Box className={classes.container}>
             <Box className={classes.child}>
+              <Preview />
               <CPU />
               <Memory />
             </Box>
             <Box flexGrow={1} className={classes.server}>
-            <Display />
               <Domain />
             </Box>
             <Box className={classes.child}>
               <Resource resource={data} />
             </Box>
           </Box>
-      )}
+        ) : (
+          <Box className={classes.container}>
+            <FullSize />
+          </Box>
+        ))}
     </>
   );
 };