FINAL-PROJECT-FRONT/src/components/AuthPage/QRCode/index.tsx

import qrCode from '../../../img/qrCode_telegram.png'
import { makeStyles, Button, } from '@material-ui/core'

const useStyles = makeStyles({
  container: {
    display: 'flex',
    alignItems: 'center',
    alignContent:'center',
    flexDirection: 'column',
    width: 350,
    margin: '0 auto',
    paddingTop: 64,
    paddingBottom: 24,
  },
  picture: {
    marginBottom: 16,
  },
  title: {
    textAlign: 'center',
    marginBottom: 16,
  },
  titleSpan: {
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    width: 25,
    height: 25,
    position: 'absolute',
    left:780,
    backgroundColor: '#5497f0',
    borderRadius: '50%',
    color: '#ffffff',
  },
  button: {
    marginTop: 20,
    height: 50,
    color: '#5497f0'
  }
})

interface IQRCode {
  handleIsQR:() => void
}

const QRCode = ({ handleIsQR }: IQRCode) => {

  const classes = useStyles()
  return (
    <div className={classes.container} >
      <img className={classes.picture} alt="QRCode" src={qrCode} width='300' height='300' />
      <h2 className={classes.title}>Log in to Telegram by QR Code</h2>
      <h3 className={classes.title}>
         <span className={classes.titleSpan}>1</span>
        Open Telegram on your phone
      </h3>
      <h3 className={classes.title}>
        <span className={classes.titleSpan}>2</span>
        {`Go to Settings > Devices > Link Desktop Device`}
      </h3>
      <h3 className={classes.title}>
        <span className={classes.titleSpan}>3</span>
        Log in to Telegram by QR Code
      </h3>
      <Button onClick={handleIsQR}
        className={classes.button}
        variant="text"
        color="default"
        fullWidth>
        LOG IN BY PHONE NUMBER
      </Button>
    </div>
  );
};

export default QRCode;