From 163398f68444d278eb83543ba9798a6441c8af9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A1n=20Oliva?= <adrian.oliva@cimat.mx>
Date: Wed, 17 May 2023 18:38:28 -0600
Subject: Modal interface for new To Do.

Hardest one yet. I don't know how I did it, but I used the
`bootstrap-datepicker` plugin for selecting the Due Date.
(https://github.com/uxsolutions/bootstrap-datepicker)
---
 src/ToDo-UI/NewToDo.jsx | 126 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 src/ToDo-UI/NewToDo.jsx

(limited to 'src/ToDo-UI/NewToDo.jsx')

diff --git a/src/ToDo-UI/NewToDo.jsx b/src/ToDo-UI/NewToDo.jsx
new file mode 100644
index 0000000..e5c1652
--- /dev/null
+++ b/src/ToDo-UI/NewToDo.jsx
@@ -0,0 +1,126 @@
+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">&times;</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>
+        </>
+    );
+}
-- 
cgit v1.2.3