Dashboard

import Head from 'next/head'; import { Box } from '@mui/material'; import { styled } from '@mui/material/styles'; import Anvils from '../components/Anvils'; import Hosts from '../components/Hosts'; import CPU from '../components/CPU'; import SharedStorage from '../components/SharedStorage'; import Memory from '../components/Memory'; import Network from '../components/Network'; import periodicFetch from '../lib/fetchers/periodicFetch'; import Servers from '../components/Servers'; import Header from '../components/Header'; import AnvilProvider from '../components/AnvilContext'; import { LARGE_MOBILE_BREAKPOINT } from '../lib/consts/DEFAULT_THEME'; import useWindowDimensions from '../hooks/useWindowDimenions'; const PREFIX = 'Dashboard'; const classes = { child: `${PREFIX}-child`, server: `${PREFIX}-server`, container: `${PREFIX}-container`, }; const StyledDiv = styled('div')(({ theme }) => ({ [`& .${classes.child}`]: { width: '22%', height: '100%', [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: { width: '50%', }, [theme.breakpoints.down('md')]: { width: '100%', }, }, [`& .${classes.server}`]: { width: '35%', height: '100%', [theme.breakpoints.down('md')]: { width: '100%', }, }, [`& .${classes.container}`]: { display: 'flex', flexDirection: 'row', width: '100%', justifyContent: 'space-between', [theme.breakpoints.down('md')]: { display: 'block', }, }, })); const Dashboard = (): JSX.Element => { const width = useWindowDimensions(); const { data } = periodicFetch( `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`, ); return ( Dashboard

{data?.anvils && width && (width > LARGE_MOBILE_BREAKPOINT ? ( ) : ( ))} ); }; export default Dashboard;