Cédric FAMIBELLE-PRONZOLA
93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
import React from 'react'
|
|
import Image from 'next/image'
|
|
import {useRouter} from 'next/router'
|
|
import PropTypes from 'prop-types'
|
|
import {withStyles} from '@material-ui/core/styles'
|
|
import {Box, Button, Dialog} from '@material-ui/core'
|
|
import MuiDialogTitle from '@material-ui/core/DialogTitle'
|
|
import MuiDialogContent from '@material-ui/core/DialogContent'
|
|
import IconButton from '@material-ui/core/IconButton'
|
|
import CloseIcon from '@material-ui/icons/Close'
|
|
import Typography from '@material-ui/core/Typography'
|
|
import {Signal} from '@icons-pack/react-simple-icons'
|
|
|
|
import QRCode from '../../public/signal-qr-code.jpg'
|
|
|
|
const signalGourpUrl = process.env.NEXT_PUBLIC_SIGNAL_URL || 'https://signal.org/fr/download/'
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
margin: 0,
|
|
padding: theme.spacing(2)
|
|
},
|
|
closeButton: {
|
|
position: 'absolute',
|
|
right: theme.spacing(1),
|
|
top: theme.spacing(1),
|
|
color: theme.palette.grey[500]
|
|
}
|
|
})
|
|
|
|
const DialogTitle = withStyles(styles)(props => {
|
|
const {children, classes, onClose, ...other} = props
|
|
return (
|
|
<MuiDialogTitle disableTypography className={classes.root} {...other}>
|
|
<Typography variant='h6'>{children}</Typography>
|
|
{onClose ? (
|
|
<IconButton aria-label='close' className={classes.closeButton} onClick={onClose}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
) : null}
|
|
</MuiDialogTitle>
|
|
)
|
|
})
|
|
|
|
const DialogContent = withStyles(theme => ({
|
|
root: {
|
|
padding: theme.spacing(2)
|
|
}
|
|
}))(MuiDialogContent)
|
|
|
|
export default function SignalDialog({ouve, handleFemen}) {
|
|
const router = useRouter()
|
|
|
|
const handleClick = () => {
|
|
router.push(signalGourpUrl)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Dialog aria-labelledby='customized-dialog-title' open={ouve} onClose={handleFemen}>
|
|
<DialogTitle style={{textAlign: 'center'}} id='customized-dialog-title' onClose={handleFemen}>
|
|
Groupe Signal
|
|
</DialogTitle>
|
|
<DialogContent dividers>
|
|
<Box style={{textAlign: 'center', marginBottom: 20}}>
|
|
<Button
|
|
variant='contained'
|
|
color='primary'
|
|
startIcon={<Signal />}
|
|
onClick={handleClick}
|
|
>
|
|
Rejoindre
|
|
</Button>
|
|
</Box>
|
|
<Box style={{textAlign: 'center'}}>
|
|
<Image
|
|
src={QRCode}
|
|
width={300}
|
|
height={300}
|
|
placeholder='blur'
|
|
/>
|
|
</Box>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
SignalDialog.propTypes = {
|
|
ouve: PropTypes.bool.isRequired,
|
|
handleFemen: PropTypes.func.isRequired
|
|
}
|