text: import React, {useState} from 'react';
  import Button from '@material-ui/core/Button';
  import TextField from '@material-ui/core/TextField';
  import Box from '@material-ui/core/Box';
  import Typography from '@material-ui/core/Typography';
  import Container from '@material-ui/core/Container';
  import RoomSharpIcon from '@material-ui/icons/RoomSharp';
  import {IconButton} from "@material-ui/core";
  import {Visibility, VisibilityOff} from "@material-ui/icons";
  import InputAdornment from "@material-ui/core/InputAdornment";
  
  export default function SignIn() {
      const [showPassword, setShowPassword] = useState(false);
  
      const handleClick = () => {
          setShowPassword(!showPassword);
      }
      return (
          <Container maxWidth="xs">
              <Box p={5} pb={0} m={2}>
                  <Box display="flex" justifyContent="space-between" mb={2}>
                      <Typography component="h6" variant="h6" color="warning.main">
                          Personal data
                      </Typography>
                      <Box display="flex">
                          <RoomSharpIcon />
                          <span style={{lineHeight: "24px"}}>CHANGE</span>
                      </Box>
                  </Box>
                  <form noValidate>
                      <TextField
                          variant="outlined"
                          fullWidth
                          id="email"
                          label="Name"
                          color="text.primary"
                          autoFocus
                          defaultValue="Andrew"
                      />
                      <TextField
                          variant="filled"
                          margin="normal"
                          required
                          fullWidth
                          label="email"
                          type="text"
                          autoComplete="email"
                          defaultValue="Enter an email"
                          style={{margin: '20px 0'}}
                      />
                      <TextField
                          variant="outlined"
                          required
                          fullWidth
                          name="password"
                          label="Password"
                          type="password"
                          id="password"
                          autoComplete="current-password"
                          InputProps={{
                              endAdornment:(
                                  <InputAdornment position="end">
                                      <IconButton
                                          onClick={handleClick}
                                          edge="end"
                                      >
                                          {showPassword ? <Visibility /> : <VisibilityOff />}
                                      </IconButton>
                                  </InputAdornment>
                              )
                          }}
                      />
  
                      <Button
                          type="submit"
                          fullWidth
                          color="primary"
                          style={{margin: '20px 0'}}
                      >
                          Sign In
                      </Button>
                  </form>
              </Box>
          </Container>
      );
  };