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