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

import monkeyPng from '../../../img/monkey.png'
import { makeStyles, TextField, Typography, IconButton } from '@material-ui/core'
import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
import React from 'react';





const useStyles = makeStyles({
  container: {
    display: 'flex',
    alignItems: 'center',
    alignContent:'center',
    flexDirection: 'column',
    width: 350,
    margin: '0 auto',
    paddingTop: 64,
    paddingBottom: 24,
  },
  picture: {
    marginBottom: 70,
    },
  titleConfirm: {
    color: '#b4b4b4',
    fontWeight: 400,
    textAlign: 'center',
    marginBottom: 20,
  },
  buttonSubmit: {
    marginTop: 20,
    height: 50,
    color: '#5497f0'
  },
  textField: {
    marginBottom:20
  },
})


interface ISMSCode {
  handleIsValidCode: (e: React.ChangeEvent<HTMLInputElement>) => void,
  number: string,
  handleResetState: () => void,
}
const SMSCode = ({handleIsValidCode,number,handleResetState}:ISMSCode) => {
  const classes = useStyles()

  return (
    <div className={classes.container} >
      <img className={classes.picture} alt="QRCode" src={monkeyPng} width='150' height='150' />
      <Typography variant="h4" color="initial">
        {number}
        <IconButton
          size="medium"
          aria-label='secondary'
          onClick={handleResetState}
           >
          <ModeEditOutlineOutlinedIcon />
        </IconButton> 
      </Typography>
      <h3 className={classes.titleConfirm}>
        We've sent the code to the Telegram app on your other device.
      </h3>
      <TextField
        id="code"
        name='code'
        label="Code"
        variant='outlined'
        fullWidth
        className={classes.textField}
        onChange={handleIsValidCode}
      />
    
    </div>
  );
};

export default SMSCode;