pawol.nu/components/awtis/awtis-kat.js

import {useState} from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'

import {
  CardActionArea,
  Grid,
  Card,
  CardContent,
  CardMedia,
  CardActions,
  Collapse,
  IconButton,
  Typography
} from '@material-ui/core'

import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import {makeStyles} from '@material-ui/core/styles'

import MizikLis from './mizik-lis'
import AwtisBiyografi from './awtis-biyografi'

const useStyles = makeStyles(theme => ({
  root: {
    maxWidth: 345
  },
  media: {
    height: 240,
    objectFit: 'contain'
  },
  expand: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest
    })
  },
  expandOpen: {
    transform: 'rotate(180deg)'
  }
}))

export default function AwtisKat({anAwtis}) {
  const [isBioOpen, setIsBioOpen] = useState(false)

  const {alias, biyografi, miziks, foto} = anAwtis
  const classes = useStyles()
  const [expanded, setExpanded] = useState(false)

  const handleExpandClick = () => {
    setExpanded(!expanded)
  }

  const handleClick = () => {
    setIsBioOpen(true)
  }

  return (
    <>
      <Grid item xs={12} sm={6} lg={4}>
        <Card className={classes.root}>
          <CardActionArea onClick={handleClick}>
            <CardMedia
              className={classes.media}
              component='img'
              alt={alias}
              image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : null}`}
              title={alias}
            />
            <CardContent>
              <Typography gutterBottom align='center' variant='h5' component='h2'>
                {alias}
              </Typography>
              <Typography align='center' variant='body2' color='textSecondary' component='h5'>
                {anAwtis.miziks.length} tèks
              </Typography>
            </CardContent>
          </CardActionArea>

          <CardActions disableSpacing>
            <IconButton
              className={clsx(classes.expand, {
                [classes.expandOpen]: expanded
              })}
              aria-expanded={expanded}
              aria-label='show more'
              onClick={handleExpandClick}
            >
              <ExpandMoreIcon />
            </IconButton>
          </CardActions>
          <Collapse unmountOnExit in={expanded} timeout='auto'>
            <CardContent>
              <MizikLis miziks={miziks} />
            </CardContent>
          </Collapse>
        </Card>
      </Grid>
      {isBioOpen && (
        <AwtisBiyografi
          alias={alias}
          miziks={miziks}
          biyografi={biyografi}
          isBioOpen={isBioOpen}
          setIsBioOpen={setIsBioOpen}
        />
      )}
    </>
  )
}

AwtisKat.propTypes = {
  anAwtis: PropTypes.object.isRequired
}