119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
'use client'
|
|
|
|
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/navigation'
|
|
import Image from 'next/image'
|
|
import {format} from 'date-fns'
|
|
import {fr} from 'date-fns/locale'
|
|
import Card from '@mui/material/Card'
|
|
|
|
import CardActionArea from '@mui/material/CardActionArea'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import Typography from '@mui/material/Typography'
|
|
import Box from '@mui/material/Box'
|
|
import Grid from '@mui/material/Grid'
|
|
import ExplicitIcon from '@mui/icons-material/Explicit'
|
|
import {styled} from '@mui/material/styles'
|
|
|
|
import {getAlias} from '../../lib/utils/format'
|
|
|
|
const PREFIX = 'teks-kat'
|
|
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`,
|
|
}
|
|
|
|
const StyledGrid = styled(Grid)({
|
|
[`& .${classes.root}`]: {
|
|
maxWidth: 345
|
|
},
|
|
})
|
|
|
|
const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
|
|
|
|
export default function TeksKat({parole}) {
|
|
const router = useRouter()
|
|
const {titre, artistes, annee, couverture, createdAt, slug} = parole
|
|
|
|
const datPiblikasyon = format(new Date(createdAt), 'P', {locale: fr})
|
|
const aliases = getAlias(artistes, parole.prioriteArtistes)
|
|
|
|
const handleClick = slug => {
|
|
router.push(`/paroles/${slug}`)?.then(() => window.scrollTo(0, 0))
|
|
}
|
|
|
|
return (
|
|
<StyledGrid size={{xs: 12, sm: 6, md: 4}}>
|
|
<Card className={classes.root}>
|
|
<CardActionArea onClick={() => handleClick(slug)}>
|
|
<Box sx={{position: 'relative', height: 240}}>
|
|
{couverture?.url ? (
|
|
<Image
|
|
src={`${IMAGE_URL}${couverture.formats?.thumbnail?.url || couverture.url}`}
|
|
alt={titre}
|
|
fill
|
|
placeholder='blur'
|
|
blurDataURL={BLUR_DATA_URL}
|
|
sizes='(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw'
|
|
style={{objectFit: 'contain'}}
|
|
/>
|
|
) : (
|
|
<Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
|
|
)}
|
|
</Box>
|
|
<CardContent>
|
|
<Box sx={{display: 'flex', alignItems: 'center'}}>
|
|
<Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
|
|
{titre}
|
|
</Typography>
|
|
{parole.creativeCommons && (
|
|
<Box marginInline={1}>
|
|
<Image
|
|
width={24}
|
|
height={24}
|
|
title='Creative Commons'
|
|
alt='ccheart_red'
|
|
src='/images/cc/icons/ccheart_red.svg'
|
|
/>
|
|
</Box>
|
|
)}
|
|
|
|
{parole.explicitLyrics && (
|
|
<ExplicitIcon style={{marginRight: 5}} color='error' fontSize='small' />
|
|
)}
|
|
</Box>
|
|
<Box sx={{textAlign: 'start'}}>
|
|
<Typography variant='body2' color='textSecondary' component='p'>
|
|
{aliases}
|
|
</Typography>
|
|
<Typography variant='body2' color='textSecondary' component='p'>
|
|
{annee}
|
|
</Typography>
|
|
<Typography sx={{fontStyle: 'italic'}} variant='caption'>
|
|
{parole.user && (
|
|
<>
|
|
(<i>parole soumise par {parole.user.username}</i>)
|
|
</>
|
|
)}
|
|
{parole.userAdmin && !parole.user && (
|
|
<>
|
|
(<i>parole soumise par {parole.userAdmin}</i>)
|
|
</>
|
|
)}
|
|
</Typography>
|
|
<Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
|
|
Publiée le : {datPiblikasyon}
|
|
</Typography>
|
|
</Box>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</StyledGrid>
|
|
)
|
|
}
|
|
|
|
TeksKat.propTypes = {
|
|
parole: PropTypes.object.isRequired
|
|
}
|