99 lines
2.8 KiB
JavaScript
99 lines
2.8 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/Unstable_Grid2'
|
|
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 {styled} from '@mui/material/styles'
|
|
|
|
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} = artiste
|
|
|
|
return (
|
|
<Grid xs={12} sm={6} md={4}>
|
|
<Kat>
|
|
<Card sx={{maxWidth: 340}}>
|
|
<CardActionArea onClick={() => router.push(`${SITE_URL}/awtis/${slug}`)}>
|
|
<CardMedia
|
|
className={classes.media}
|
|
component='img'
|
|
alt={alias}
|
|
image={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
|
|
title={alias}
|
|
/>
|
|
<CardContent>
|
|
<Typography gutterBottom align='center' variant='h5' component='h2'>
|
|
{alias}
|
|
</Typography>
|
|
<Typography align='center' variant='body2' color='textSecondary' component='h5'>
|
|
{`${paroles.data.length === 0 ? 'Aucune parole pour le moment' : `${paroles.data.length} ${paroles.data.length > 1 ? 'paroles' : 'parole'}`}`}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
{esByografiOuve && (
|
|
<AwtisBiyografi
|
|
alias={alias}
|
|
paroles={paroles.data}
|
|
biographie={biographie}
|
|
esByografiOuve={esByografiOuve}
|
|
meteEsByografiOuve={meteEsByografiOuve}
|
|
/>
|
|
)}
|
|
</Kat>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
AwtisKat.propTypes = {
|
|
artiste: PropTypes.object.isRequired
|
|
}
|