add filter js

kivi-cars/src/components/Filters.css

@@ -0,0 +1,83 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+nav {
+    width: 100%;
+    background-color: #02adba;
+    color: #fff;
+    height: 54px;
+    line-height: 54px;
+    text-align: center;
+}
+
+
+@media only screen and (min-width: 601px) {
+    nav {
+        text-align: center;
+        width: 100%;
+        background-color: #02adba;
+        color: #fff;
+        height: 64px;
+        line-height: 64px;
+    }
+
+    .container {
+        width: 80%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin: auto;
+    }
+
+    .filters-tab {
+        width: 100%;
+        height: 48;
+    }
+
+    .filters-links{
+        margin-top: 2rem;
+        width: 100%;
+        display: flex;
+        flex-grow: 1;
+        flex-wrap: nowrap;
+        justify-content: space-evenly;
+        list-style-type: none;
+    }
+
+    .filters-links li {
+        text-align: center;
+        width: 7rem;
+        flex-grow: 1;
+        flex-wrap: nowrap;
+
+    }
+
+    .filters {
+        display: inline-block;
+        border-bottom: 2px solid #02adba;
+        width: 5rem;
+        padding: 1rem 10rem;
+        white-space: nowrap;
+        margin-left: auto;
+        font-size: 22px;
+    }
+
+    .filters a{
+        text-decoration: none;
+        color: #02adba;
+    }
+
+    .filters a:visited {
+        color: #02adba;
+    }
+
+    .cars-brands-models {
+        border: 2px solid blue;
+        width: 100%;
+    }
+
+}
+
+

kivi-cars/src/components/Filters.js

@@ -0,0 +1,46 @@
+import React from "react";
+import "./Filters.css";
+import Cars from "./cars";
+
+const Filters = () => {
+
+    const unsortedCars = Cars
+    const cars = unsortedCars.sort(unsortedCars.brand)
+
+
+
+    return(
+        <div>
+            <nav>
+                <h3 className="title">Filteri za pretrazivanje</h3>
+            </nav>
+            <div className="container">
+                <div className="filters-tabs">
+                    <ul className="filters-links">
+                        <li className="filters">
+                            <a id="standard-filters" href="#">Filteri</a>
+                        </li> 
+                        <li className="filters">
+                            <a id="advanced-filters" href="#">Napredni filteri</a>
+                        </li>
+                    </ul>
+                </div>
+                <div className="container-standard">
+                    <div className="cars-brands-models">
+                        <label>Marka: </label>
+                        <select name="brands" id="brands">
+                            {cars.map(car => <option className="option-field" value={car.brand}>{car.brand}</option>)}
+                        </select>
+                    </div>
+                </div>
+                <div className="container-advanced">
+                    
+                </div>
+            </div>
+
+
+        </div>
+    )
+}
+
+export default Filters