src/ToDo-UI/Search.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

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>
    );
}