frontend: Rechercher et trier les fonctions
This commit is contained in:
parent
4d1f31afe3
commit
d66c4037db
@ -14,9 +14,16 @@ const Functions = () => (
|
||||
<div className="container text-center">
|
||||
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-24">
|
||||
<h1 className="Functions__title">Fonctions</h1>
|
||||
</div>
|
||||
<h1 className="Functions__title">Fonctions</h1>
|
||||
</div>
|
||||
|
||||
<div className="Functions__search-container row justify-content-center">
|
||||
<select className="form-control">
|
||||
{/* TODO: API Call to fetch categories */}
|
||||
<option>Toutes catégories</option>
|
||||
<option className="Functions__select-option" style={{ backgroundColor: "#406880" }}>✨ Utilitaires</option>
|
||||
</select>
|
||||
<input type="search" className="form-control Functions__search-input" name="search" id="search" placeholder="🔎 Rechercher..."></input>
|
||||
</div>
|
||||
|
||||
<div className="row justify-content-center">
|
||||
|
@ -59,4 +59,17 @@ a:hover {
|
||||
a, .important {
|
||||
color: var(--important);
|
||||
text-decoration: none;
|
||||
}
|
||||
.form-control {
|
||||
display: block;
|
||||
height: calc(1.5em + .75rem + 2px);
|
||||
padding: .375rem .75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: .5em;
|
||||
}
|
@ -1,3 +1,14 @@
|
||||
.Functions__title {
|
||||
padding: 20px 0 20px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.Functions__search-container {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.Functions__select-option {
|
||||
color: rgb(221, 220, 220);
|
||||
}
|
||||
.Functions__search-input {
|
||||
width: 35%;
|
||||
}
|
Reference in New Issue
Block a user