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

import {useRef, useEffect} from 'react'
import PropTypes from 'prop-types'

import {
  Button,
  Box,
  Typography,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from '@mui/material'

import MizikBadjMeni from './mizik-badj-meni'

export default function AwtisBiyografi({alias, paroles, biographie, esByografiOuve, meteEsByografiOuve}) {
  const handleClose = () => {
    meteEsByografiOuve(false)
  }

  const descriptionElementRef = useRef(null)
  useEffect(() => {
    if (esByografiOuve) {
      const {current: descriptionElement} = descriptionElementRef
      if (descriptionElement !== null) {
        descriptionElement.focus()
      }
    }
  }, [esByografiOuve])

  return (
    <div>
      <Dialog
        scroll='paper'
        open={esByografiOuve}
        aria-labelledby='scroll-dialog-title'
        aria-describedby='scroll-dialog-description'
        onClose={handleClose}
      >
        <Box display='flex' justifyContent='center' alignItems='center'>
          <DialogTitle id='scroll-dialog-title' align='center'>{alias}</DialogTitle>
          <MizikBadjMeni paroles={paroles} />
        </Box>
        <DialogContent dividers>
          <DialogContentText
            ref={descriptionElementRef}
            align='justify'
            id='scroll-dialog-description'
            tabIndex={-1}
          >
            {biographie ? (
              <Typography component='span'>
                {biographie}
              </Typography>
            ) : (
              <Typography component='span'>
                Pas de biobraphie disponible
              </Typography>
            )}
          </DialogContentText>
        </DialogContent>
        <DialogActions style={{margin: 'auto'}}>
          <Button variant='outlined' color='primary' onClick={handleClose}>
            Fermer
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

AwtisBiyografi.propTypes = {
  alias: PropTypes.string.isRequired,
  paroles: PropTypes.array.isRequired,
  biographie: PropTypes.string,
  esByografiOuve: PropTypes.bool.isRequired,
  meteEsByografiOuve: PropTypes.func.isRequired
}

AwtisBiyografi.defaultProps = {
  biographie: null
}