diff options
Diffstat (limited to 'src/ToDo-UI')
| -rw-r--r-- | src/ToDo-UI/NewToDo.jsx | 126 | ||||
| -rw-r--r-- | src/ToDo-UI/ToDoList.jsx | 69 |
2 files changed, 0 insertions, 195 deletions
diff --git a/src/ToDo-UI/NewToDo.jsx b/src/ToDo-UI/NewToDo.jsx deleted file mode 100644 index e5c1652..0000000 --- a/src/ToDo-UI/NewToDo.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import React from "react"; - -export function NewToDo() { - return ( - <> - <div className="container mt-3 mb-3"> - <button - type="button" - className="btn btn-outline-dark" - data-bs-toggle="modal" - data-bs-target="#NewToDo" - > - + New To Do - </button> - </div> - - <div - className="modal fade" - id="NewToDo" - tabIndex="-1" - role="dialog" - aria-labelledby="New To Do Window" - aria-hidden="true" - > - <div - className="modal-dialog modal-dialog-centered" - role="document" - > - <div className="modal-content"> - <div className="modal-header"> - <h5 - className="modal-title" - id="exampleModalLongTitle" - > - Add a new to do - </h5> - <button - type="button" - className="close" - data-bs-dismiss="modal" - aria-label="Close" - > - <span aria-hidden="true">×</span> - </button> - </div> - <div className="modal-body"> - <form> - <div className="form-floating mb-3"> - <input - className="form-control" - id="new-todo-id" - value="4" - disabled - /> - <label htmlFor="floatingInput">ID</label> - </div> - <div className="form-floating mb-3"> - <input - className="form-control" - placeholder="Text" - id="new-todo-text" - /> - <label htmlFor="floatingInput">Text</label> - </div> - <div className="input-group mb-3"> - <span className="input-group-text"> - <i className="fa-regular fa-calendar"></i> - </span> - <div className="form-floating"> - <input - className="form-control" - id="new-todo-due-date" - name="new-todo-due-date" - placeholder="Due date" - /> - <label htmlFor="floatingInput"> - Due Date - </label> - </div> - </div> - <div class="form-check mb-3"> - <input - class="form-check-input" - type="checkbox" - value="" - id="flexCheckDefault" - /> - <label - class="form-check-label" - for="flexCheckDefault" - > - Done - </label> - </div> - <div class="form-floating mb-3"> - <select - class="form-select" - id="floatingSelect" - aria-label="Floating label select example" - > - <option selected>Low</option> - <option value="1">Medium</option> - <option value="2">High</option> - </select> - <label for="floatingSelect">Priority</label> - </div> - </form> - </div> - <div className="modal-footer"> - <button - type="button" - className="btn btn-secondary" - data-bs-dismiss="modal" - > - Cancel - </button> - <button type="button" className="btn btn-primary"> - Add - </button> - </div> - </div> - </div> - </div> - </> - ); -} diff --git a/src/ToDo-UI/ToDoList.jsx b/src/ToDo-UI/ToDoList.jsx deleted file mode 100644 index c6b2d92..0000000 --- a/src/ToDo-UI/ToDoList.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; - -export function ToDoList() { - const todos = [ - { - id: 1, - text: "Finish homework.", - due_date: "2023/05/29", - done: false, - priority: "high", - creation_date: "2023/05/11", - }, - ]; - - return ( - <div className="container"> - <table className="table align-middle"> - <thead> - <tr> - <th scope="col">#</th> - <th scope="col">Name</th> - <th scope="col">Priority</th> - <th scope="col">Due Date</th> - <th scope="col">Actions</th> - </tr> - </thead> - <tbody className="table-group-divider"> - {todos.map((item) => ( - <tr> - <th scope="row"> - <div className="form-check"> - <input - className="form-check-input" - type="checkbox" - value={item.done ? "checked" : ""} - id="flexCheckChecked" - ></input> - </div> - </th> - <td>{item.text}</td> - <td>{item.priority}</td> - <td>{item.due_date}</td> - <td> - <div - className="btn-group btn-group-sm" - role="group" - aria-label="Basic example" - > - <button - type="button" - className="btn btn-outline-dark" - > - Edit - </button> - <button - type="button" - className="btn btn-outline-dark" - > - Delete - </button> - </div> - </td> - </tr> - ))} - </tbody> - </table> - </div> - ); -} |