Create LicenseModal component

components/cc/license-modal.js

@@ -0,0 +1,70 @@
+import {useState} from 'react'
+import PropTypes from 'prop-types'
+import Image from 'next/image'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import DialogActions from '@mui/material/DialogActions'
+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 LicensesInfo from './licenses-infos'
+
+export default function LicenseModal({license}) {
+  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 sx={{border: '1px solid grey', marginBottom: 2}} onClick={handleClickOpen}>
+        <Image
+          width={120}
+          height={42}
+          alt={license}
+          src={`/images/cc/${license}.svg`}
+        />
+      </Button>
+      <Dialog
+        fullScreen={fullScreen}
+        open={open}
+        aria-labelledby='responsive-dialog-title'
+        onClose={handleClose}
+      >
+        <DialogTitle textAlign='center' id='responsive-dialog-title'>
+          <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+            <Image
+              width={46}
+              height={46}
+              alt={license}
+              src='/images/cc/icons/cc.svg'
+            />
+            <Typography marginLeft={1} fontWeight='bold' variant='h4'>Creative Commons</Typography>
+          </Box>
+        </DialogTitle>
+        <DialogContent dividers>
+          <LicensesInfo license={license} />
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose}>
+            Fermer
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}
+
+LicenseModal.propTypes = {
+  license: PropTypes.string.isRequired
+}

components/teks/teks.js

@@ -15,6 +15,7 @@ import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {formatJsonString, getAlias} from '../../lib/utils/format'
 
+import LicenseModal from '../cc/license-modal'
 import EntegreMizik from './entegre-mizik'
 import OkiMizik from './oki-mizik'
 import DiferansDialog from './diferans-dialog'