React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

body {
  // background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  box-sizing: border-box;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.app {
  
}
$red: #e40049;

button {
  border: none;
  background: none;
  color: $red;
  outline: none;
  padding: 0;
  
  transition: all 0.15s ease;

  &:hover {
    cursor: pointer;
    color: darken($red, 10%);
    transition: all 0.15s ease;
  }
  
  &:active {
    color: darken($red, 20%);
    transition: all 0.15s ease;
  }
  
  &.white-text {
    color: white;
    
      &:hover {
        color: white;
      }

      &:active {
        color: white;
      }
  }
}

.section {
  padding: 30px;
}
.section-top {
  border-bottom: 1px solid #ddd;
}

.section-delete {
   padding-top: 15px;
   padding-bottom: 15px;
   background: transparent;
   transition: all 0.15s ease;

  &.red {
    background: $red;
    color: white;
    transition: background 0.15s ease;
  }
}

.delete-box {
  border: 1px solid #ddd;
  border-radius: 5px;
  display: inline-block;
  min-width: 300px;
  overflow: hidden;
}

React

function App() {
	return (
  	<div className='app'>
  	  <Delete />
  	</div>
  );
}

function Delete() {
	const [isConfirming, setIsConfirming] = React.useState(false);
  const handleDelete = React.useCallback(() => {
  	setIsConfirming(true);
  }, []);
  const handleCancelDelete = React.useCallback(() => {
  	setIsConfirming(false);
  }, []);
  let deleteSectionClass = 'section section-delete';
  if (isConfirming) deleteSectionClass += ' red';
  let deleteButtonClass = '';
  if (isConfirming) deleteButtonClass = ' white-text';
  
	return (
  	<div className='delete-box'>
      <div className='section section-top'>
        Child info
      </div>
      <div className={deleteSectionClass}>
        {
        	isConfirming ? (
          	<div>
              Are you sure? <button onClick={handleCancelDelete} className={deleteButtonClass}>
                Yes
              </button> <button onClick={handleCancelDelete} className={deleteButtonClass}>
                No
              </button>
            </div>
          ) : (
            <button onClick={handleDelete} className={deleteButtonClass}>
              X Delete
            </button>
          )
        }
      </div>
  	</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))