Create SignalDialog component

2021-07-30 22:14:28 +02:00
parent 70c21be62c
commit 3d0d6b200a
1 changed files with 92 additions and 0 deletions
@@ -0,0 +1,92 @@
+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
+}