A simple list for the To Do's.

Cannot edit nor remove info. Plain interfaceeeee.

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>
+    );
+}