Cédric FAMIBELLE-PRONZOLA
128 lines
3.2 KiB
JavaScript
128 lines
3.2 KiB
JavaScript
import {useState} from 'react'
|
|
import {useRouter} from 'next/router'
|
|
import PropTypes from 'prop-types'
|
|
import clsx from 'clsx'
|
|
|
|
import {
|
|
CardActionArea,
|
|
Grid,
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
CardActions,
|
|
Collapse,
|
|
IconButton,
|
|
Typography
|
|
} from '@mui/material'
|
|
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
|
|
import {styled} from '@mui/material/styles'
|
|
|
|
import MizikLis from './mizik-lis'
|
|
import AwtisBiyografi from './awtis-biyografi'
|
|
|
|
const PREFIX = 'awtis-kat'
|
|
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
|
|
|
|
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)'
|
|
}
|
|
}))
|
|
|
|
export default function AwtisKat({anAwtis}) {
|
|
const router = useRouter()
|
|
const [esByografiOuve, meteEsByografiOuve] = useState(false)
|
|
const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
|
|
|
|
const {alias, biyografi, teks, foto, slug} = anAwtis
|
|
|
|
const [expanded, setExpanded] = useState(false)
|
|
|
|
const handleExpandClick = () => {
|
|
setExpanded(!expanded)
|
|
}
|
|
|
|
return (
|
|
<Grid item 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={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
|
|
title={alias}
|
|
/>
|
|
<CardContent>
|
|
<Typography gutterBottom align='center' variant='h5' component='h2'>
|
|
{alias}
|
|
</Typography>
|
|
<Typography align='center' variant='body2' color='textSecondary' component='h5'>
|
|
{anAwtis.teks.length} tèks
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
|
|
<CardActions disableSpacing>
|
|
<IconButton
|
|
className={clsx(classes.expand, {
|
|
[classes.expandOpen]: expanded
|
|
})}
|
|
aria-expanded={expanded}
|
|
aria-label='show more'
|
|
size='large'
|
|
onClick={handleExpandClick}
|
|
>
|
|
<ExpandMoreIcon />
|
|
</IconButton>
|
|
</CardActions>
|
|
<Collapse unmountOnExit in={expanded} timeout='auto'>
|
|
<CardContent>
|
|
<MizikLis teks={teks} />
|
|
</CardContent>
|
|
</Collapse>
|
|
</Card>
|
|
{esByografiOuve && (
|
|
<AwtisBiyografi
|
|
alias={alias}
|
|
teks={teks}
|
|
biyografi={biyografi}
|
|
esByografiOuve={esByografiOuve}
|
|
meteEsByografiOuve={meteEsByografiOuve}
|
|
/>
|
|
)}
|
|
</Kat>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
AwtisKat.propTypes = {
|
|
anAwtis: PropTypes.object.isRequired
|
|
}
|