diff options
| -rw-r--r-- | src/App.jsx | 2 | ||||
| -rw-r--r-- | src/ToDo-UI/ToDoList.jsx | 69 |
2 files changed, 71 insertions, 0 deletions
diff --git a/src/App.jsx b/src/App.jsx index 5704b36..00b3278 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,13 @@ import React from "react"; import { Counter } from "./features/counter/Counter"; import { Search } from "./ToDo-UI/Search"; +import { ToDoList } from "./ToDo-UI/ToDoList"; function App() { return ( <div> <Search /> + <ToDoList /> <Counter /> </div> ); diff --git a/src/ToDo-UI/ToDoList.jsx b/src/ToDo-UI/ToDoList.jsx new file mode 100644 index 0000000..c6b2d92 --- /dev/null +++ b/src/ToDo-UI/ToDoList.jsx @@ -0,0 +1,69 @@ +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> + ); +} |