commit 316f43a0f8db27620ba53bf5993f569a969742b5
parent f6a1a1662771a95e48ad8cee8d42f6de32a70f49
Author: Adrián Oliva <[email protected]>
Date: Wed, 17 May 2023 18:36:09 -0600
A simple list for the To Do's.
Cannot edit nor remove info. Plain interfaceeeee.
Diffstat:
2 files changed, 71 insertions(+), 0 deletions(-)
diff --git 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
@@ -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>
+ );
+}
