Search section in a bare bones state.

Just plain UI interface. No functionality.

2 files changed, 58 insertions, 0 deletions

diff --git a/src/App.jsx b/src/App.jsx
index f12edb5..5704b36 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,11 @@
 import React from "react";
 import { Counter } from "./features/counter/Counter";
+import { Search } from "./ToDo-UI/Search";
 
 function App() {
     return (
         <div>
+            <Search />
             <Counter />
         </div>
     );
diff --git a/src/ToDo-UI/Search.jsx b/src/ToDo-UI/Search.jsx
new file mode 100644
index 0000000..bb36dba
--- /dev/null
+++ b/src/ToDo-UI/Search.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+
+export function Search() {
+    return (
+        <div className="container mt-3" style={{ border: "2px solid black" }}>
+            <div className="row">
+                <div className="input-group mb-3 mt-3">
+                    <span className="input-group-text" id="search-name">
+                        Name
+                    </span>
+                    <input
+                        type="text"
+                        className="form-control"
+                        aria-label="Name"
+                        aria-describedby="search-name"
+                    ></input>
+                </div>
+            </div>
+
+            <div className="row">
+                <div className="col-sm-7">
+                    <div className="input-group mb-3 mt-3">
+                        <label className="input-group-text">Priority</label>
+                        <select className="form-select" id="search-priority">
+                            <option defaultValue>All</option>
+                            <option value="1">High</option>
+                            <option value="2">Medium</option>
+                            <option value="3">Low</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div className="row align-items-center justify-content-between">
+                <div className="col-sm-7">
+                    <div className="input-group mb-3 mt-3">
+                        <label className="input-group-text">State</label>
+                        <select className="form-select" id="search-priority">
+                            <option defaultValue>All</option>
+                            <option value="1">Done</option>
+                            <option value="2">Undone</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div className="col-sm-2">
+                    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+                        <button type="button" className="btn btn-outline-dark">
+                            Search
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}