TypeScript & React Material UI: Build a Powerful Instance Console

import React from 'react'; import Box from '@material-ui/core/Box'; import Card from '@material-ui/core/Card'; import CardContent from '@material-ui/core/CardContent'; import Typography from '@material-ui/core/Typography'; import Grid from '@material-ui/core/Grid'; import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; import Tooltip from '@material-ui/core/Tooltip'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { InstanceConsoleProps } from './types';

const useStyles = makeStyles((theme: Theme) => createStyles({ root: { maxWidth: 345, }, media: { height: 140, }, iconButton: { padding: theme.spacing(1), }, button: { margin: theme.spacing(1), }, }) );

export default function InstanceConsole({ showConsole }: InstanceConsoleProps) { const classes = useStyles();

return ( <Box sx={{ display: showConsole ? 'block' : 'none' }}> Basic Information Instance ID: 1234567890 Instance Type: t2.micro Region: US West (Oregon) Availability Zone: us-west-2a Instance Functions Detailed Information Instance ID: 1234567890 Instance Type: t2.micro Region: US West (Oregon) Availability Zone: us-west-2a VPC ID: vpc-1234567890 Subnet ID: subnet-1234567890 Private IP: 10.0.0.10 Public IP: 54.0.0.10 Security Groups:

sg-1234567890
sg-0987654321

Instance Console <IconButton aria-label="copy" className={classes.iconButton} onClick={() => { navigator.clipboard.writeText('Hello, World!'); }} > content_copy <IconButton aria-label="clear" className={classes.iconButton} onClick={() => { console.clear(); }} > clear_all <IconButton aria-label="fullscreen" className={classes.iconButton} onClick={() => { const elem = document.documentElement; if ( document.fullscreenElement === null || document.fullscreenElement === undefined ) { elem.requestFullscreen(); } else { document.exitFullscreen(); } }} > fullscreen <Box sx={{ height: 400, overflow: 'auto', mt: 2 }}>

{'Hello, World!'}

); }

TypeScript & React Material UI: Build a Powerful Instance Console