#10 Refactor button elements in Color

[StephMode]

https://github.com/StephMode/recap-project-4-theme-creator/blob/748af038632f0d36768886ef81325b694cbeea8a/src/Components/Color/Color.jsx#L52C7-L88C17

These elements need a refactoring Consider creating button components and refactor event handler logic into components to slim down Color Comp

[StephMode]

This is the code for a ColorButton component I've started working on as I developed issue 4 #5 Edit Color. I've decided to set it aside because it was not in the scope of the implementation. While working on #21 jsx and css clean up I decided to remove it from the code base altogether and keep it here, because the context is appropriate:

export default function ColorButton() {
  return <button>Lalala</button>;
}

export default function ColorButton() {
  const [showConfirm, setShowConfirm] = useState(false);
  const [showEdit, setShowEdit] = useState(false);
  const [showDelete, setShowDelete] = useState(false);

  function handleDeleteConfirm() {
    // onDeleteColor(cancelButtonStatus); // this only displays clicked-status of delete btn
    onDeleteColor(color.id); // this is what we will need in order to pass ID of clicked color
  }

  function handleDeleteClick() {
    setShowConfirm(true);
  }

  function cancelDelete() {
    setShowConfirm(false);
  }

  function handleEditClick() {
    setShowEdit(true);
    setShowDelete(false);
  }

  function cancelEdit() {
    setShowEdit(false);
  }

  return (
    <div className="color-card--button-container">
      {showDelete === true ? <button>lalala</button> : ""}

      {/* ternary op for Cancel Button UI */}

      {!showConfirm ? (
        <button className="color-card--button" onClick={handleDeleteClick}>
          🗑️ Delete
        </button>
      ) : (
        <div className="buttons-container--confirm-message">
          <p>Really delete?</p>
          <button className="color-card--button" onClick={cancelDelete}>
            ❌ Cancel
          </button>
          <button className="color-card--button" onClick={handleDeleteConfirm}>
            🗑️ Delete
          </button>
        </div>
      )}

      {/* ternary op for Edit Button UI */}
      {!showEdit ? (
        <button className="color-card--button" onClick={handleEditClick}>
          🖍️ Edit
        </button>
      ) : (
        <div>
          <ColorEditor></ColorEditor>
          <button className="color-card--button" onClick={cancelEdit}>
            ❌ Cancel
          </button>
        </div>
      )}
    </div>
  );
}