feat: add sourceOriginale to CC modal

components/cc/license-modal.js

@@ -8,11 +8,13 @@ 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 Divider from '@mui/material/Divider'
+import Link from '@mui/material/Link'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import {useTheme} from '@mui/material/styles'
 import LicensesInfo from './licenses-infos'
 
-export default function LicenseModal({license}) {
+export default function LicenseModal({license, sourceOriginale, remixes}) {
   const [open, setOpen] = useState(false)
   const theme = useTheme()
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
@@ -53,6 +55,48 @@ export default function LicenseModal({license}) {
           </Box>
         </DialogTitle>
         <DialogContent dividers>
+          {sourceOriginale && (
+            <Box sx={{mb: 3}}>
+              <Typography variant='overline' color='text.secondary' display='block' gutterBottom>
+                Basé sur
+              </Typography>
+              <Link href={`/paroles/${sourceOriginale.slug}`} underline='hover' color='inherit'>
+                <Typography variant='h6' fontWeight='bold'>{sourceOriginale.titre}</Typography>
+              </Link>
+              {sourceOriginale.artistes?.length > 0 && (
+                <Typography variant='body1' color='text.secondary'>
+                  {sourceOriginale.artistes.map(a => a.alias).join(', ')}
+                </Typography>
+              )}
+              {sourceOriginale.annee && (
+                <Typography variant='body2' color='text.secondary'>{sourceOriginale.annee}</Typography>
+              )}
+              <Divider sx={{mt: 2}} />
+            </Box>
+          )}
+          {remixes && (
+            <Box sx={{mb: 3}}>
+              <Typography variant='overline' color='text.secondary' display='block' gutterBottom>
+                Déclinaisons
+              </Typography>
+              {remixes.map(remix => (
+                <Box key={remix.slug} sx={{mb: 1.5}}>
+                  <Link href={`/paroles/${remix.slug}`} underline='hover' color='inherit'>
+                    <Typography variant='h6' fontWeight='bold'>{remix.titre}</Typography>
+                  </Link>
+                  {remix.artistes?.length > 0 && (
+                    <Typography variant='body1' color='text.secondary'>
+                      {remix.artistes.map(a => a.alias).join(', ')}
+                    </Typography>
+                  )}
+                  {remix.annee && (
+                    <Typography variant='body2' color='text.secondary'>{remix.annee}</Typography>
+                  )}
+                </Box>
+              ))}
+              <Divider sx={{mt: 2}} />
+            </Box>
+          )}
           <LicensesInfo license={license} />
         </DialogContent>
         <DialogActions>
@@ -66,5 +110,7 @@ export default function LicenseModal({license}) {
 }
 
 LicenseModal.propTypes = {
-  license: PropTypes.string.isRequired
+  license: PropTypes.string.isRequired,
+  sourceOriginale: PropTypes.object,
+  remixes: PropTypes.array
 }