You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.7 KiB
72 lines
1.7 KiB
import { useState } from 'react'; |
|
import { useRouter } from 'next/router'; |
|
import { Box } from '@material-ui/core'; |
|
import { makeStyles } from '@material-ui/core/styles'; |
|
|
|
import PeriodicFetch from '../../lib/fetchers/periodicFetch'; |
|
import { FullSize, Preview } from '../../components/Display'; |
|
import Header from '../../components/Header'; |
|
|
|
const useStyles = makeStyles((theme) => ({ |
|
child: { |
|
width: '22%', |
|
height: '100%', |
|
[theme.breakpoints.down('lg')]: { |
|
width: '25%', |
|
}, |
|
[theme.breakpoints.down('md')]: { |
|
width: '100%', |
|
}, |
|
}, |
|
server: { |
|
width: '35%', |
|
[theme.breakpoints.down('lg')]: { |
|
width: '25%', |
|
}, |
|
[theme.breakpoints.down('md')]: { |
|
width: '100%', |
|
}, |
|
}, |
|
container: { |
|
display: 'flex', |
|
flexDirection: 'row', |
|
width: '100%', |
|
justifyContent: 'space-between', |
|
[theme.breakpoints.down('md')]: { |
|
display: 'block', |
|
}, |
|
}, |
|
})); |
|
|
|
const Server = (): JSX.Element => { |
|
const [previewMode, setPreviewMode] = useState<boolean>(true); |
|
const classes = useStyles(); |
|
|
|
const router = useRouter(); |
|
const { uuid } = router.query; |
|
|
|
const { data } = PeriodicFetch<AnvilReplicatedStorage>( |
|
`${process.env.NEXT_PUBLIC_API_URL}/get_replicated_storage?server_uuid=${uuid}`, |
|
); |
|
|
|
return ( |
|
<> |
|
<Header /> |
|
{typeof uuid === 'string' && |
|
data && |
|
(previewMode ? ( |
|
<Box className={classes.container}> |
|
<Box className={classes.child}> |
|
<Preview setMode={setPreviewMode} /> |
|
</Box> |
|
</Box> |
|
) : ( |
|
<Box className={classes.container}> |
|
<FullSize setMode={setPreviewMode} uuid={uuid} /> |
|
</Box> |
|
))} |
|
</> |
|
); |
|
}; |
|
|
|
export default Server;
|
|
|