123 lines
4.5 KiB
JavaScript
123 lines
4.5 KiB
JavaScript
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {Accordion, AccordionDetails, AccordionSummary, Box, Button, CardActionArea, Chip, Container, Grid, Paper} from '@mui/material'
|
|
import {useRouter} from 'next/router'
|
|
import Card from '@mui/material/Card'
|
|
import CardContent from '@mui/material/CardContent'
|
|
import Avatar from '@mui/material/Avatar'
|
|
import Typography from '@mui/material/Typography'
|
|
import {green} from '@mui/material/colors'
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
|
|
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
|
|
|
|
import AwtisBiyografi from './awtis-biyografi'
|
|
import MizikLis from './mizik-lis'
|
|
|
|
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
|
|
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'
|
|
|
|
const sortTeks = paroles => paroles.sort((a, b) => b.id - a.id)
|
|
|
|
export default function AwtisDetay({anAwtis}) {
|
|
const router = useRouter()
|
|
const [esByografiOuve, meteEsByografiOuve] = useState(false)
|
|
const {alias, biographie, paroles, photo} = anAwtis
|
|
const sortedTeks = sortTeks(paroles.data)
|
|
const gwanBiyo = biographie && biographie.length > 100
|
|
|
|
const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie
|
|
|
|
const handleClick = () => {
|
|
meteEsByografiOuve(true)
|
|
}
|
|
|
|
const handleBack = () => {
|
|
const href = '/awtis?paj&paj=1'
|
|
const as = '/awtis/paj/1'
|
|
router.push(href, as)
|
|
}
|
|
|
|
return (
|
|
<Container>
|
|
<Box sx={{marginBlock: 2}}>
|
|
<Typography textAlign='center' variant='h6' component='h1'>
|
|
{alias}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{justifyContent: 'center', display: 'flex', marginBottom: 2}}>
|
|
<Avatar
|
|
src={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
|
|
alt={`Photo ${alias}`}
|
|
sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
|
|
/>
|
|
</Box>
|
|
<Grid container direction='column' justifyContent='center' alignItems='center' spacing={3}>
|
|
{biyo && (
|
|
<Grid item xs={12} md={6}>
|
|
<Card sx={{minWidth: 300}}>
|
|
<CardActionArea onClick={handleClick}>
|
|
<CardContent>
|
|
<Typography gutterBottom variant='body1' component='h2'>
|
|
<strong>Biographie</strong>
|
|
</Typography>
|
|
<Typography textAlign='justify' variant='subtitle1' component='h3'>
|
|
{biyo}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
</Grid>
|
|
)}
|
|
<Grid item xs={12} md={6}>
|
|
<Box marginBottom={3}>
|
|
{paroles.data.length > 1 ? (
|
|
<Accordion>
|
|
<AccordionSummary
|
|
expandIcon={<ExpandMoreIcon />}
|
|
aria-controls='panel-teks-content'
|
|
id='panel-teks-header'
|
|
>
|
|
<Typography marginRight={2} textAlign='center' variant='body1' component='h2'><strong>Liste des paroles</strong></Typography>
|
|
<Chip color='primary' label={paroles.data.length} size='small' variant='contained' />
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<MizikLis paroles={sortedTeks} />
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
) : (
|
|
paroles.data.length === 0 ? (
|
|
<Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Aucune parole pour le moment</strong></Typography>
|
|
) : (
|
|
<>
|
|
<Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Parole</strong></Typography>
|
|
<Paper>
|
|
<MizikLis paroles={paroles.data} />
|
|
</Paper>
|
|
</>
|
|
)
|
|
)}
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
<Box sx={{textAlign: 'center', marginBottom: 2}} >
|
|
<Button variant='outlined' startIcon={<KeyboardBackspaceIcon />} onClick={handleBack}>
|
|
Retour aux artistes
|
|
</Button>
|
|
</Box>
|
|
{esByografiOuve && (
|
|
<AwtisBiyografi
|
|
alias={alias}
|
|
paroles={paroles.data}
|
|
biographie={biographie}
|
|
esByografiOuve={esByografiOuve}
|
|
meteEsByografiOuve={meteEsByografiOuve}
|
|
/>
|
|
)}
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
AwtisDetay.propTypes = {
|
|
anAwtis: PropTypes.object.isRequired
|
|
}
|