frontend: Rechercher et trier les fonctions

frontend/pages/functions.js

@@ -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">

frontend/public/css/general.css

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

frontend/public/css/pages/functions.css

@@ -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%;
 }