commit f6a1a1662771a95e48ad8cee8d42f6de32a70f49 parent 22b15f833d388d2fed12b7f4dcd917c57712cbec Author: Adrián Oliva <[email protected]> Date: Wed, 17 May 2023 18:35:05 -0600 Search section in a bare bones state. Just plain UI interface. No functionality. Diffstat:
| M | src/App.jsx | | | 2 | ++ |
| A | src/ToDo-UI/Search.jsx | | | 56 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 58 insertions(+), 0 deletions(-)
diff --git 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 @@ -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> + ); +}