Create RezoDialog component

2022-05-08 23:46:39 +04:00
parent f69dfeeff5
commit 7d1cf8ed95
1 changed files with 82 additions and 0 deletions
@@ -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>
+  )
+}