Create AwtisDetay component

2022-05-11 03:08:35 +04:00
parent 5a2dd5a86d
commit af1ced7273
1 changed files with 117 additions and 0 deletions
@@ -0,0 +1,117 @@
+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 API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
+
+const sortTeks = teks => teks.sort((a, b) => b.id - a.id)
+
+export default function AwtisDetay({anAwtis}) {
+  const router = useRouter()
+  const [esByografiOuve, meteEsByografiOuve] = useState(false)
+  const {alias, biyografi, teks, foto} = anAwtis
+  const sortedTeks = sortTeks(teks)
+  const gwanBiyo = anAwtis.biyografi.length > 100
+
+  const biyo = gwanBiyo ? `${anAwtis.biyografi.slice(0, 100)}...` : anAwtis.biyografi
+
+  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'}}>
+        <Avatar
+          src={`${API_URL}${foto[0].url}`}
+          alt={`Photo ${alias}`}
+          sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
+        />
+      </Box>
+      <Box sx={{textAlign: 'center', marginTop: 2}} >
+        <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />} onClick={handleBack}>
+          Listes des artistes
+        </Button>
+      </Box>
+      <Grid container direction='column' justifyContent='center' alignItems='center' spacing={3} sx={{marginTop: 2}}>
+        {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={5}>
+            {teks.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 textes</strong></Typography>
+                  <Chip color='primary' label={teks.length} size='small' variant='contained' />
+                </AccordionSummary>
+                <AccordionDetails>
+                  <MizikLis teks={sortedTeks} />
+                </AccordionDetails>
+              </Accordion>
+            ) : (
+              <>
+                <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Texte</strong></Typography>
+                <Paper>
+                  <MizikLis teks={teks} />
+                </Paper>
+              </>
+            )}
+          </Box>
+        </Grid>
+      </Grid>
+      {esByografiOuve && (
+        <AwtisBiyografi
+          alias={alias}
+          teks={teks}
+          biyografi={biyografi}
+          esByografiOuve={esByografiOuve}
+          meteEsByografiOuve={meteEsByografiOuve}
+        />
+      )}
+    </Container>
+  )
+}
+
+AwtisDetay.propTypes = {
+  anAwtis: PropTypes.object.isRequired
+}