Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import { useState } from 'react'
import Spinner from '../../../shared/loading-spinner/Spinner';
import styled from 'styled-components';

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;
function CloseAccount() {
    const [showInputCode, setShowInputCode] = useState(false);
    const [loading, setLoading] = useState(false);
    const handleGetCode  = () => {
        try {
            setShowInputCode(true)
            console.log('>>: get code')        
        } catch (error) {
            console.log('>>: error > ', error)
        }
    }
    const handleSubmit = (e) => {
        try {
            setLoading(true)
            e.preventDefault();

        } catch (error) {
            console.log('>>: error > ', error)
        }finally{
            setLoading(false)
        }
    }
    return (
        <div className="acc-setting h-100" style={{ position: "relative" }}>
            <div className="container">
                <h1>¿Esta seguro de eliminar su cuenta?</h1>
                <div className="row">
                    <div className='col-md col-sm-12'>
                        <button className="btn btn-primary" onClick={handleGetCode}>Si, estoy seguro</button>
                    </div>
                    <div className='col-md col-sm-12'>
                        <button className="btn btn-primary">No</button>
                    </div>
                </div>
            </div>
            {
                showInputCode && (
                    <form onSubmit={handleSubmit}>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Ingrese el codigo</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Ingrese el codigo" />
                            <small id="emailHelp" class="form-text text-muted">Este codigo fue enviado a tu correo electrónico.</small>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                )
            }
            {loading && (
                <StyledSpinnerContainer>
                    <Spinner />
                </StyledSpinnerContainer>
            )}
        </div>
    )
}

export default CloseAccount