src/ToDo-UI/ToDoList.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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>
    );
}