-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathStatusBar
66 lines (59 loc) · 2.2 KB
/
StatusBar
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
57
58
59
60
61
62
63
64
65
66
/*
STYLES:
#dash .input-group-text,
#dash .dashSearch {
background-color: transparent;
border: none;
outline: none !important;
}
.dashSearch::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #AAB4BE;
opacity: 1; /* Firefox */
}
.dashSearch:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #AAB4BE;
}
.dashSearch::-ms-input-placeholder { /* Microsoft Edge */
color: #AAB4BE;
}
*/
import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
export default function StatusBar({ showSearchBar }) {
return (
<div className="row py-2 g-0">
<div className="col-9">
{showSearchBar ?
<div className="input-group mb-3">
<span className="input-group-text" id="basic-addon1">
<FontAwesomeIcon className="black" icon={faSearch} />
</span>
<input type="text" className="form-control dashSearch" placeholder="Search for anything" aria-label="Username" aria-describedby="basic-addon1" />
</div>
:
null
}
</div>
<div className="col-3">
<div className="dropdown mb-3 float-end">
<div className="d-flex align-items-center text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<h4 className="pointer"><User's Name (dynamic)></h4>
</div>
<ul className="dropdown-menu text-small shadow" aria-labelledby="dropdownUser1">
<li><a className="dropdown-item" href="#">Profile</a></li>
<li><hr className="dropdown-divider" /></li>
<li><a className="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
);
}
StatusBar.propTypes = {
showSearchBar: PropTypes.bool,
};
StatusBar.defaultProps = {
showSearchBar: false,
};