84 lines
2.3 KiB
JavaScript
84 lines
2.3 KiB
JavaScript
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 PublicIcon from '@mui/icons-material/Public'
|
|
|
|
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, textAlign: 'center'}} {...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' size='large' endIcon={<PublicIcon />} onClick={handleClickOpen}>
|
|
<strong>Fédiverse</strong>
|
|
</Button>
|
|
<Dialog
|
|
fullScreen={fullScreen}
|
|
open={open}
|
|
aria-labelledby='rézo-dialog'
|
|
onClose={handleClose}
|
|
>
|
|
<BootstrapDialogTitle id='rézo-dialog' onClose={handleClose}>
|
|
#OKi sur le <strong>Fédiverse</strong>
|
|
</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>
|
|
)
|
|
}
|