From 7d1cf8ed959831009fe6120953691ee2ebc12a7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sun, 8 May 2022 23:46:39 +0400
Subject: [PATCH] Create RezoDialog component

---
 components/rezo/rezo-dialog.js | 82 ++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 components/rezo/rezo-dialog.js

diff --git a/components/rezo/rezo-dialog.js b/components/rezo/rezo-dialog.js
new file mode 100644
index 0000000..a86ad71
--- /dev/null
+++ b/components/rezo/rezo-dialog.js
@@ -0,0 +1,82 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import {useTheme} from '@mui/material/styles'
+import {Box, Grid, IconButton} from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+import {rezoNou} from '../../lib/rezo-lis'
+
+import KatRezoNou from './kat-rezo-nou'
+
+function BootstrapDialogTitle(props) {
+  const {children, onClose, ...other} = props
+
+  return (
+    <DialogTitle sx={{m: 0, p: 2}} {...other}>
+      {children}
+      {onClose ? (
+        <IconButton
+          aria-label='close'
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: theme => theme.palette.grey[500],
+          }}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </DialogTitle>
+  )
+}
+
+BootstrapDialogTitle.propTypes = {
+  children: PropTypes.node,
+  onClose: PropTypes.func.isRequired,
+}
+
+export default function RezoDialog() {
+  const [open, setOpen] = useState(false)
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
+
+  const handleClickOpen = () => {
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <div>
+      <Button variant='outlined' onClick={handleClickOpen}>
+        Nos réseaux !
+      </Button>
+      <Dialog
+        fullScreen={fullScreen}
+        open={open}
+        aria-labelledby='rézo-dialog'
+        onClose={handleClose}
+      >
+        <BootstrapDialogTitle id='rézo-dialog' onClose={handleClose}>
+          Liste de nos réseaux
+        </BootstrapDialogTitle>
+        <DialogContent>
+          <Box>
+            <Grid container rowSpacing={1} columnSpacing={{xs: 1, sm: 2, md: 3}}>
+              {rezoNou.map(({tit, img, soutit, ko, lyen}) => <KatRezoNou key={tit} tit={tit} img={img} soutit={soutit} ko={ko} lyen={lyen} />)}
+            </Grid>
+          </Box>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}