Create AwtisKat component

components/awtis/awtis-kat.js

@@ -0,0 +1,114 @@
+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 AwtisBio from './awtis-bio'
+
+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, bio, miziks} = 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} xl={3}>
+        <Card className={classes.root}>
+          <CardActionArea onClick={handleClick}>
+            <CardMedia
+              className={classes.media}
+              component='img'
+              alt={alias}
+              image={`${process.env.NEXT_PUBLIC_API_URL}${anAwtis.photo[0].url}`}
+              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 && (
+        <AwtisBio
+          alias={alias}
+          miziks={miziks}
+          bio={bio}
+          isBioOpen={isBioOpen}
+          setIsBioOpen={setIsBioOpen}
+        />
+      )}
+    </>
+  )
+}
+
+AwtisKat.propTypes = {
+  anAwtis: PropTypes.object.isRequired
+}