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

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

Browse Source
main
Tsu-ba-me 3 years ago
parent 3218fc14dc
commit 465894eb81
1 changed files with 15 additions and 8 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. 23
      striker-ui/pages/server/index.tsx

23
striker-ui/pages/server/index.tsx
Unescape View File

@ -1,21 +1,29 @@
import { useState } from 'react'; import { useState } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
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 { FullSize, Preview } from '../../components/Display'; import { FullSize, Preview } from '../../components/Display';
import Header from '../../components/Header'; import Header from '../../components/Header';
const useStyles = makeStyles((theme) => ({ const PREFIX = 'Server';
preview: {
const classes = {
preview: `${PREFIX}-preview`,
fullView: `${PREFIX}-fullView`,
};
const StyledDiv = styled('div')(({ theme }) => ({
[`& .${classes.preview}`]: {
width: '25%', width: '25%',
height: '100%', height: '100%',
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
width: '100%', width: '100%',
}, },
}, },
fullView: {
[`& .${classes.fullView}`]: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
width: '100%', width: '100%',
@ -25,13 +33,12 @@ const useStyles = makeStyles((theme) => ({
const Server = (): JSX.Element => { const Server = (): JSX.Element => {
const [previewMode, setPreviewMode] = useState<boolean>(true); const [previewMode, setPreviewMode] = useState<boolean>(true);
const classes = useStyles();
const router = useRouter(); const router = useRouter();
const { uuid, server_name } = router.query; const { uuid, server_name } = router.query;
return ( return (
<> <StyledDiv>
<Head> <Head>
<title>{server_name}</title> <title>{server_name}</title>
</Head> </Head>
@ -54,7 +61,7 @@ const Server = (): JSX.Element => {
/> />
</Box> </Box>
))} ))}
</> </StyledDiv>
); );
}; };

Write Preview
Loading…
Cancel
Save