115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
'use client'
|
|
|
|
import {useState} from 'react'
|
|
import {useRouter} from 'next/navigation'
|
|
import PropTypes from 'prop-types'
|
|
|
|
import CardActionArea from '@mui/material/CardActionArea'
|
|
import Grid from '@mui/material/Grid'
|
|
import Card from '@mui/material/Card'
|
|
import CardMedia from '@mui/material/CardMedia'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import Typography from '@mui/material/Typography'
|
|
import Chip from '@mui/material/Chip'
|
|
|
|
import {styled} from '@mui/material/styles'
|
|
import VerifiedIcon from '@mui/icons-material/Verified'
|
|
|
|
import AwtisBiyografi from './awtis-biyografi'
|
|
|
|
const PREFIX = 'awtis-kat'
|
|
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
|
|
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`,
|
|
media: `${PREFIX}-media`,
|
|
expand: `${PREFIX}-expand`,
|
|
expandOpen: `${PREFIX}-expandOpen`
|
|
}
|
|
|
|
const Kat = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`& .${classes.media}`]: {
|
|
height: 240,
|
|
objectFit: 'contain'
|
|
},
|
|
|
|
[`& .${classes.expand}`]: {
|
|
transform: 'rotate(0deg)',
|
|
marginLeft: 'auto',
|
|
transition: theme.transitions.create('transform', {
|
|
duration: theme.transitions.duration.shortest
|
|
})
|
|
},
|
|
|
|
[`& .${classes.expandOpen}`]: {
|
|
transform: 'rotate(180deg)'
|
|
}
|
|
}))
|
|
|
|
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
|
|
|
|
export default function AwtisKat({artiste}) {
|
|
const router = useRouter()
|
|
const [esByografiOuve, meteEsByografiOuve] = useState(false)
|
|
|
|
const {alias, biographie, paroles, photo, slug, isOKIAwtis} = artiste
|
|
|
|
return (
|
|
<Grid size={{xs: 12, sm: 6, md: 4}}>
|
|
<Kat>
|
|
<Card sx={{maxWidth: 340, position: 'relative', ...(isOKIAwtis && {outline: '2px solid #FFD700'})}}>
|
|
{isOKIAwtis && (
|
|
<Chip
|
|
icon={<VerifiedIcon sx={{fontSize: 14}} />}
|
|
label='OKI Exclusif'
|
|
size='small'
|
|
sx={{
|
|
position: 'absolute', top: 8, left: 8, zIndex: 1,
|
|
bgcolor: '#FFD700', color: '#000',
|
|
fontWeight: 700, fontSize: '0.7rem',
|
|
'& .MuiChip-icon': {color: '#000'},
|
|
}}
|
|
/>
|
|
)}
|
|
<CardActionArea onClick={() => router.push(`/awtis/${slug}`)}>
|
|
<CardMedia
|
|
className={classes.media}
|
|
component='img'
|
|
alt={alias}
|
|
image={`${photo?.url ? `${IMAGE_URL}${photo?.formats?.thumbnail?.url || photo?.url}` : noImageUrl}`}
|
|
loading='lazy'
|
|
title={alias}
|
|
/>
|
|
<CardContent>
|
|
<Typography gutterBottom align='center' variant='h5' component='h2'>
|
|
{alias}
|
|
</Typography>
|
|
<Typography align='center' variant='body2' color='textSecondary' component='h5'>
|
|
{`${paroles.length === 0 ? 'Aucune parole pour le moment' : `${paroles.length} ${paroles.length > 1 ? 'paroles' : 'parole'}`}`}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
{esByografiOuve && (
|
|
<AwtisBiyografi
|
|
alias={alias}
|
|
paroles={paroles}
|
|
biographie={biographie}
|
|
esByografiOuve={esByografiOuve}
|
|
meteEsByografiOuve={meteEsByografiOuve}
|
|
/>
|
|
)}
|
|
</Kat>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
AwtisKat.propTypes = {
|
|
artiste: PropTypes.object.isRequired
|
|
}
|