main
parent
23cdfd10b2
commit
66c0e01b27
1 changed files with 49 additions and 12 deletions
@ -1,20 +1,57 @@ |
|||||||
import VncDisplay from 'react-vnc-display'; |
import { Dispatch, SetStateAction } from 'react'; |
||||||
|
import Image from 'next/image'; |
||||||
|
import { Box } from '@material-ui/core'; |
||||||
|
import { makeStyles } from '@material-ui/core/styles'; |
||||||
|
import IconButton from '@material-ui/core/IconButton'; |
||||||
|
import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows'; |
||||||
import { Panel } from '../Panels'; |
import { Panel } from '../Panels'; |
||||||
import { HeaderText } from '../Text'; |
import { BLACK, TEXT } from '../../lib/consts/DEFAULT_THEME'; |
||||||
|
|
||||||
|
interface PreviewProps { |
||||||
|
setMode: Dispatch<SetStateAction<boolean>>; |
||||||
|
} |
||||||
|
|
||||||
|
const useStyles = makeStyles(() => ({ |
||||||
|
displayBox: { |
||||||
|
paddingTop: '1em', |
||||||
|
paddingBottom: 0, |
||||||
|
}, |
||||||
|
fullScreenButton: { |
||||||
|
borderRadius: 8, |
||||||
|
backgroundColor: TEXT, |
||||||
|
'&:hover': { |
||||||
|
backgroundColor: TEXT, |
||||||
|
}, |
||||||
|
}, |
||||||
|
fullScreenBox: { |
||||||
|
paddingLeft: '.7em', |
||||||
|
paddingRight: 0, |
||||||
|
}, |
||||||
|
})); |
||||||
|
|
||||||
|
const Preview = ({ setMode }: PreviewProps): JSX.Element => { |
||||||
|
const classes = useStyles(); |
||||||
|
|
||||||
const Display = (): JSX.Element => { |
|
||||||
return ( |
return ( |
||||||
<Panel> |
<Panel> |
||||||
<HeaderText text="Display" /> |
<Box display="flex" className={classes.displayBox}> |
||||||
<VncDisplay |
<Box flexGrow={1}> |
||||||
url="wss://spain.cdot.systems:5000/" |
<Image src="/pngs/preview.png" width={300} height={200} /> |
||||||
style={{ |
</Box> |
||||||
width: '50vw', |
<Box className={classes.fullScreenBox}> |
||||||
height: '70vh', |
<IconButton |
||||||
}} |
className={classes.fullScreenButton} |
||||||
/> |
style={{ color: BLACK }} |
||||||
|
aria-label="upload picture" |
||||||
|
component="span" |
||||||
|
onClick={() => setMode(false)} |
||||||
|
> |
||||||
|
<DesktopWindowsIcon /> |
||||||
|
</IconButton> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
</Panel> |
</Panel> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default Display; |
export default Preview; |
||||||
|
Loading…
Reference in new issue