From ea70d6b0d04c565316a3c61d9a881302d2b52938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Sun, 14 Apr 2024 07:06:31 +0400
Subject: [PATCH] Create LicenseModal component

---
 components/cc/license-modal.js | 70 ++++++++++++++++++++++++++++++++++
 components/teks/teks.js        |  1 +
 2 files changed, 71 insertions(+)
 create mode 100644 components/cc/license-modal.js

diff --git a/components/cc/license-modal.js b/components/cc/license-modal.js
new file mode 100644
index 0000000..6e6aacf
--- /dev/null
+++ b/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
+}
diff --git a/components/teks/teks.js b/components/teks/teks.js
index 1d9e755..e7b4d01 100644
--- a/components/teks/teks.js
+++ b/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'