From f6a1a1662771a95e48ad8cee8d42f6de32a70f49 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:35:05 -0600
Subject: Search section in a bare bones state.

Just plain UI interface. No functionality.
---
 src/App.jsx            |  2 ++
 src/ToDo-UI/Search.jsx | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/ToDo-UI/Search.jsx

(limited to 'src')

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>
+    );
+}
-- 
cgit v1.2.3