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.
79 lines
2.0 KiB
79 lines
2.0 KiB
import { Dispatch, SetStateAction } from 'react'; |
|
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 CropOriginal from '@material-ui/icons/Image'; |
|
import { Panel } from '../Panels'; |
|
import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME'; |
|
import { HeaderText } from '../Text'; |
|
|
|
interface PreviewProps { |
|
setMode: Dispatch<SetStateAction<boolean>>; |
|
serverName: string | string[] | undefined; |
|
} |
|
|
|
const useStyles = makeStyles(() => ({ |
|
displayBox: { |
|
padding: 0, |
|
paddingTop: '.7em', |
|
width: '100%', |
|
}, |
|
fullScreenButton: { |
|
borderRadius: 8, |
|
backgroundColor: TEXT, |
|
'&:hover': { |
|
backgroundColor: TEXT, |
|
}, |
|
}, |
|
fullScreenBox: { |
|
paddingLeft: '1em', |
|
padding: 0, |
|
}, |
|
imageButton: { |
|
padding: 0, |
|
color: TEXT, |
|
}, |
|
imageIcon: { |
|
borderRadius: 8, |
|
padding: 0, |
|
backgroundColor: GREY, |
|
fontSize: '8em', |
|
}, |
|
})); |
|
|
|
const Preview = ({ setMode, serverName }: PreviewProps): JSX.Element => { |
|
const classes = useStyles(); |
|
|
|
return ( |
|
<Panel> |
|
<Box flexGrow={1}> |
|
<HeaderText text={`Server: ${serverName}`} /> |
|
</Box> |
|
<Box display="flex" className={classes.displayBox}> |
|
<Box> |
|
<IconButton |
|
className={classes.imageButton} |
|
style={{ color: BLACK }} |
|
component="span" |
|
onClick={() => setMode(false)} |
|
> |
|
<CropOriginal className={classes.imageIcon} /> |
|
</IconButton> |
|
</Box> |
|
<Box className={classes.fullScreenBox}> |
|
<IconButton |
|
className={classes.fullScreenButton} |
|
style={{ color: BLACK }} |
|
component="span" |
|
onClick={() => setMode(false)} |
|
> |
|
<DesktopWindowsIcon /> |
|
</IconButton> |
|
</Box> |
|
</Box> |
|
</Panel> |
|
); |
|
}; |
|
|
|
export default Preview;
|
|
|