Add files via upload

Author: PasinduUkwatta

Backdrop.js

@@ -0,0 +1,5 @@
+function Backdrop(props) {
+  return <div className="backdrop" onClick={props.onCancel} />;
+}
+
+export default Backdrop;

Model.js

@@ -0,0 +1,22 @@
+function Model(props) {
+  function cancelHandler() {
+    props.onCancel();
+  }
+  function confirmHandler() {
+    props.onConfirm();
+  }
+
+  return (
+    <div className="modal">
+      <p>Are you sure?</p>
+      <button className="btn btn--alt" onClick={cancelHandler}>
+        Cancel
+      </button>
+      <button className="btn" onClick={confirmHandler}>
+        Confirm
+      </button>
+    </div>
+  );
+}
+
+export default Model;

Todo.js

@@ -0,0 +1,33 @@
+import { useState } from "react";
+
+import Backdrop from "./Backdrop";
+import Model from "./Model";
+
+function Todo(props) {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  function deleteHandler() {
+    setModalIsOpen(true);
+  }
+
+  function closeModalHandler() {
+    setModalIsOpen(false);
+  }
+
+  return (
+    <div className="card">
+      <h2>{props.text}</h2>
+      <div className="actions">
+        <button className="btn" onClick={deleteHandler}>
+          Delete
+        </button>
+      </div>
+      {modalIsOpen && (
+        <Model onCancel={closeModalHandler} onConfirm={closeModalHandler} />
+      )}
+      {modalIsOpen && <Backdrop onCancel={closeModalHandler} />}
+    </div>
+  );
+}
+
+export default Todo;