seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(striker-ui): migrate MUI v4->5 on pages/Dashboard

Browse Source
main
Tsu-ba-me 3 years ago
parent 95cc1871b0
commit 276e30077d
1 changed files with 20 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      striker-ui/pages/index.tsx

31
striker-ui/pages/index.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save