|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
import Head from 'next/head'; |
|
|
|
|
import { Box } from '@material-ui/core'; |
|
|
|
|
import { makeStyles } from '@material-ui/core/styles'; |
|
|
|
|
import { Box } from '@mui/material'; |
|
|
|
|
import { styled } from '@mui/material/styles'; |
|
|
|
|
|
|
|
|
|
import Anvils from '../components/Anvils'; |
|
|
|
|
import Hosts from '../components/Hosts'; |
|
|
|
|
@ -15,8 +15,16 @@ import AnvilProvider from '../components/AnvilContext'; |
|
|
|
|
import { LARGE_MOBILE_BREAKPOINT } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
|
import useWindowDimensions from '../hooks/useWindowDimenions'; |
|
|
|
|
|
|
|
|
|
const useStyles = makeStyles((theme) => ({ |
|
|
|
|
child: { |
|
|
|
|
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)]: { |
|
|
|
|
@ -26,14 +34,16 @@ const useStyles = makeStyles((theme) => ({ |
|
|
|
|
width: '100%', |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
server: { |
|
|
|
|
|
|
|
|
|
[`& .${classes.server}`]: { |
|
|
|
|
width: '35%', |
|
|
|
|
height: '100%', |
|
|
|
|
[theme.breakpoints.down('md')]: { |
|
|
|
|
width: '100%', |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
container: { |
|
|
|
|
|
|
|
|
|
[`& .${classes.container}`]: { |
|
|
|
|
display: 'flex', |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
width: '100%', |
|
|
|
|
@ -44,8 +54,7 @@ const useStyles = makeStyles((theme) => ({ |
|
|
|
|
}, |
|
|
|
|
})); |
|
|
|
|
|
|
|
|
|
const Home = (): JSX.Element => { |
|
|
|
|
const classes = useStyles(); |
|
|
|
|
const Dashboard = (): JSX.Element => { |
|
|
|
|
const width = useWindowDimensions(); |
|
|
|
|
|
|
|
|
|
const { data } = PeriodicFetch<AnvilList>( |
|
|
|
|
@ -53,7 +62,7 @@ const Home = (): JSX.Element => { |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<StyledDiv> |
|
|
|
|
<Head> |
|
|
|
|
<title>Dashboard</title> |
|
|
|
|
</Head> |
|
|
|
|
@ -95,8 +104,8 @@ const Home = (): JSX.Element => { |
|
|
|
|
</Box> |
|
|
|
|
))} |
|
|
|
|
</AnvilProvider> |
|
|
|
|
</> |
|
|
|
|
</StyledDiv> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default Home; |
|
|
|
|
export default Dashboard; |
|
|
|
|
|
Tsu-ba-me
3 years ago