pawol.nu/components/files/kits-dialog.js

import {useState} from 'react'
import PropTypes from 'prop-types'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogTitle'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemButton from '@mui/material/ListItemButton'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'

import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
import {Nextcloud} from '@icons-pack/react-simple-icons'

const PLATFORM_ICON = {
  NIYAJ: Nextcloud,
  kDrive: CloudDownloadIcon,
}

export default function KitsDialog({kits}) {
  const [open, setOpen] = useState(false)
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))

  const handleClickOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  return (
    <>
      <Button endIcon={<CloudDownloadIcon />} sx={{marginBottom: 2}} variant='outlined' onClick={handleClickOpen}>
        Kits
      </Button>
      <Dialog
        fullScreen={fullScreen}
        open={open}
        aria-labelledby='KitsDialog'
        onClose={handleClose}
      >
        <DialogTitle>Télécharger un kit</DialogTitle>
        <DialogContent dividers>
          <List>
            {kits.map(kit => {
              const PlatformIcon = PLATFORM_ICON[kit.plateforme] ?? CloudDownloadIcon
              return (
                <ListItem key={kit.url} disablePadding>
                  <ListItemButton component='a' href={kit.url} target='_blank' rel='noopener noreferrer'>
                    <ListItemIcon>
                      <PlatformIcon />
                    </ListItemIcon>
                    <ListItemText primary={kit.type} secondary={kit.plateforme} />
                  </ListItemButton>
                </ListItem>
              )
            })}
          </List>
        </DialogContent>
        <DialogActions>
          <Button autoFocus onClick={handleClose}>
            Fermer
          </Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

KitsDialog.propTypes = {
  kits: PropTypes.array.isRequired
}