Create LicensesInfos component

components/cc/licenses-infos.js

@@ -0,0 +1,96 @@
+/* eslint-disable import/extensions */
+
+import Image from 'next/image'
+import PropTypes from 'prop-types'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Button from '@mui/material/Button'
+import Link from '@mui/material/Link'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+
+import licencesData from './data.json'
+import licensesConditions from './conditions.json'
+
+export default function LicensesInfo({license}) {
+  const licenseInfo = licencesData.find(item => item.license === license)
+  const licenseList = licenseInfo.license.split('-')
+
+  const conditions = licenseList.map(license => licensesConditions[license])
+
+  return (
+    <Box>
+      <Box sx={{marginBottom: 1, textAlign: 'center', display: 'flex', justifyContent: 'center'}}>
+        <Box marginRight={0.5}>
+          <Image
+            width={46}
+            height={46}
+            alt={license}
+            src='/images/cc/icons/cc.svg'
+          />
+        </Box>
+        {licenseList.map(license => (
+          <Box key={license} marginRight={0.5}>
+            <Image
+              width={46}
+              height={46}
+              alt={license}
+              src={`/images/cc/icons/${license}.svg`}
+            />
+          </Box>
+        ))}
+      </Box>
+      <Typography gutterBottom textAlign='center' variant='h4' fontWeight='bold'>{licenseInfo.title}</Typography>
+      <Typography gutterBottom textAlign='center' marginBottom={3} variant='h6'>{licenseInfo.subtitle}</Typography>
+      <Typography fontWeight='bold' variant='h5'>Vous êtes autorisé à :</Typography>
+      <List sx={{marginBottom: 3}}>
+        {Object.entries(licenseInfo.allowed).map(([action, description]) => (
+          <ListItem key={action} alignItems='flex-start'>
+            <Box marginRight={2}>
+              <Image
+                width={46}
+                height={46}
+                alt={action}
+                src={`/images/cc/icons/${action}.svg`}
+              />
+            </Box>
+            <ListItemText
+              primary={<Typography sx={{textDecoration: 'underline'}} fontWeight='bold' variant='h5'>{action}</Typography>}
+              secondary={<Typography variant='h6'>{description}</Typography>}
+            />
+          </ListItem>
+        ))}
+      </List>
+      <Typography gutterBottom fontWeight='bold' variant='h5'>Conditions :</Typography>
+      <List sx={{marginBottom: 3}}>
+        {conditions.map(({name, description}, index) => (
+          <ListItem key={name} alignItems='flex-start'>
+            <Box marginRight={2}>
+              <Image
+                width={46}
+                height={46}
+                alt={licenseList[index]}
+                src={`/images/cc/icons/${licenseList[index]}.svg`}
+              />
+            </Box>
+            <ListItemText
+              primary={<Typography sx={{textDecoration: 'underline'}} fontWeight='bold' variant='h5'>{name}</Typography>}
+              secondary={<Typography variant='h6'>{description}</Typography>}
+            />
+          </ListItem>
+        ))}
+      </List>
+      <Link target='_blank' rel='noreferrer' underline='none' href={licenseInfo.link}>
+        <Button variant='text' endIcon={<OpenInNewIcon />}>
+          Lien vers la licence
+        </Button>
+      </Link>
+    </Box>
+  )
+}
+
+LicensesInfo.propTypes = {
+  license: PropTypes.string.isRequired
+}