117 lines
4.1 KiB
JavaScript
117 lines
4.1 KiB
JavaScript
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 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, sourceOriginale, remixes}) {
|
|
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>
|
|
{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>
|
|
<Button autoFocus onClick={handleClose}>
|
|
Fermer
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|
|
|
|
LicenseModal.propTypes = {
|
|
license: PropTypes.string.isRequired,
|
|
sourceOriginale: PropTypes.object,
|
|
remixes: PropTypes.array
|
|
}
|