add filters data

add standard button

See merge request saburly/marketalarm/kivi-za-auta-react!8

kivi-cars/package.json

@@ -6,7 +6,6 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
-    "nouislider": "^15.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

kivi-cars/src/assets/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chevron-left</title>
+<path d="M11 16l13-13v-3l-16 16 16 16v-3l-13-13z"></path>
+</svg>

kivi-cars/src/assets/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chevron-right</title>
+<path d="M21 16l-13 13v3l16-16-16-16v3l13 13z"></path>
+</svg>

kivi-cars/src/components/Button/StandardBtn.js

@@ -0,0 +1,13 @@
+import './button.css'
+
+var title = "DALJE";
+const StandardBtn = (props) => {
+    return (
+        <div className='standard-btn'>
+
+           <button className='standardBtn'>{title}</button>
+        </div>
+    )
+}
+
+export default StandardBtn

kivi-cars/src/components/Button/button.css

@@ -0,0 +1,32 @@
+.standard-btn {
+    text-align: center;
+}
+
+.standardBtn {
+    width: fit-content;
+    background-color: #02ADBA;
+    font-size: 15px;
+    padding: 7px 20px 7px 20px;
+    color: white;
+    border: #02ADBA;
+}
+
+.standardBtn:hover {
+    background-color:#3eced8 ;
+    color: white;
+}
+
+.left-button {
+    padding: 5px;
+}
+.left-button:hover {
+    background-color:#9eedf3 
+}
+
+.right-button {
+    padding: 5px;
+}
+.right-button:hover {
+    background-color:#9eedf3 
+ 
+}

kivi-cars/src/components/Button/leftBtn.js

@@ -0,0 +1,12 @@
+import './button.css'
+import { ReactComponent as ArrowLeft } from '../../assets/arrow-left.svg';
+
+const leftBtn = (props) => {
+    return ( 
+        <div className='left-button'>
+            <ArrowLeft/>
+        </div>
+     );
+}
+
+export default leftBtn

kivi-cars/src/components/Button/rightBtn.js

@@ -0,0 +1,13 @@
+import './button.css'
+import { ReactComponent as ArrowRight } from '../../assets/arrow-right.svg';
+
+const rightBtn = (props) => {
+    return ( 
+        <div className='right-button'>
+            <ArrowRight/>
+        </div>
+        
+     );
+}
+
+export default rightBtn

kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.css

@@ -0,0 +1,22 @@
+.buttons-toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.left-group {
+    padding-left: 10px;
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+}
+
+.right-group {
+    padding-right: 10px;
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+}
+
+
+
+

kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js

@@ -0,0 +1,22 @@
+import './ButtonsToolbar.css';
+import ArrowLeft from '../Button/leftBtn';
+import ArrowRigh from '../Button/rightBtn';
+
+
+const ButtonsToolbar = (props) => {
+    return (
+        <div className='buttons-toolbar'>
+            <div className='left-group'>
+                <ArrowLeft />
+            </div>
+            <div className='right-group'>
+                <ArrowRigh/>
+            </div>
+        </div>
+    )
+} 
+
+export default ButtonsToolbar
+
+
+

kivi-cars/src/components/Filters.css

@@ -1,83 +0,0 @@
-*{
-    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

@@ -1,46 +0,0 @@
-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

kivi-cars/src/components/Filters/Filter/Filter.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Filter = (props) => {
+    return(
+        <div >
+            <select>
+                <option>
+                    
+                </option>
+            </select>
+        </div>
+    )
+}
+
+export default Filter;

kivi-cars/src/components/Filters/Filters.css

@@ -0,0 +1,3 @@
+
+
+

kivi-cars/src/components/Filters/Standard-Filters.js

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Filters.css";
+import Cars from "../../data/cars";
+
+const Filters = () => {
+
+    return(
+        <div className="filters-container">
+            
+        </div>
+    )
+}
+
+export default Filters

kivi-cars/src/components/Filters/Standard-filters.js

@@ -0,0 +1 @@
+import React from "react";

kivi-cars/src/components/Header/Header.css

@@ -0,0 +1,26 @@
+header {
+    width: 100%;
+    height: 70px;
+    background-color: #02adba;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.title {
+    resize: both;
+    padding: 20px;
+    font-size: 25px;
+}
+
+  @media screen and (max-width: 800px) {
+    .title {
+        font-size: 20px;
+    }
+  }
+
+@media screen and (max-width: 300px) {
+    .title {
+        font-size: 17px;
+    }
+  }

kivi-cars/src/components/Header/Header.js

@@ -0,0 +1,12 @@
+import './Header.css'
+
+
+const Header = (props) => {
+    return (
+        <header>
+            <h3 className="title">{props.header}</h3>
+        </header>
+    )
+}
+
+export default Header

kivi-cars/src/components/Searchfilters/FiltersNav.css

@@ -0,0 +1,53 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+/* color:#02adba */
+
+.links-container ul li {
+    display: inline-block;
+}
+
+.active {
+    border-bottom: 3px solid #02adba;
+}
+
+.links-container{
+    background-color: #fff;
+}
+
+.filters-links{
+    display: flex;
+    justify-content: space-around;
+    padding: 1em;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.filters-link{
+    padding: 0.5em 2.5em;
+    white-space: none;
+    flex-grow: 1;
+    cursor: pointer;
+}
+
+@media only screen and (max-width: 920px) and (min-width: 541px){
+    .filters-link {
+        line-height: 54px;
+        font-size: 22px;
+    }
+}
+
+@media only screen and (min-width: 921px){
+    .filters-link {
+        line-height: 54px;
+        font-size: 24px;
+
+    }
+
+    .filters-links {
+        width: 90%;
+        margin: auto;
+    }
+}

kivi-cars/src/components/Searchfilters/FiltersNav.js

@@ -0,0 +1,20 @@
+import './FiltersNav.css';
+
+const FiltersNav = () => {
+
+
+    return(
+        <div className="links-container">
+            <ul className="filters-links">
+                <li className="filters-link active">
+                    <a id="standard-filters">Filteri</a>
+                </li> 
+                <li className="filters-link">
+                    <a id="advanced-filters">Napredni filteri</a>
+                </li>
+            </ul>
+        </div>
+    )
+}
+
+export default FiltersNav;

kivi-cars/src/containers/App.css

@@ -1,4 +1,14 @@
+*{
+  padding: 0;
+  margin: 0;
+}
+
+
 .App{
   display: flex;
   flex-direction: column;
+}
+
+p, h1, h2, h3 ,h4 {
+  font-family: Arial, Helvetica, sans-serif;
 }

kivi-cars/src/containers/App.js

@@ -1,14 +1,23 @@
 import './App.css';
 import React from 'react';
-import Filters from '../components/Filters';
+import FiltersNav from '../components/Searchfilters/FiltersNav';
+import Header from '../components/Header/Header';
+import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import StandardBtn from '../components/Button/StandardBtn';
+import Filters from '../components/Filters/Filters';
 
 
 function App() {
+
+  const info = 'Dobrodosli na stranicu kivi!'
+
+
   return (
     <div className="App">
-      <Filters />
+      <Header header={info}/>
+      <ButtonsToolbar/>
+
     </div>
- 
   );
 }
 

kivi-cars/src/data/air-condition.js

@@ -0,0 +1,12 @@
+const AirCondition = {
+    "ime" : "Klima",
+    "tipovi" : [
+        "Jednozonska",
+        "Dvozonska",
+        "Trozonska",
+        "Četverozonska",
+        "Ostalo"
+    ]
+}
+
+export default AirCondition;

kivi-cars/src/data/checkbox.js

@@ -0,0 +1,37 @@
+const Checkbox = [
+    "ABS",
+    "ESP",
+    "Tempomat",
+    "Alarm",
+    "Airbag",
+    "Šiber",
+    "Servo volan",
+    "Koža",
+    "Klima",
+    "Centralna brava",
+    "Daljinsko zaključavanje",
+    "ISOFIX",
+    "Registrovan",
+    "Električni podizači stakala",
+    "Električni retrovizor",
+    "Turbo",
+    "Naslon za ruke",
+    "Start/Stop",
+    "Pakring assistent",
+    "Senzor mrtvog ugla",
+    "Servisna knjiga",
+    "Komande na volanu",
+    "Navigacija",
+    "Grijanje sjedišta",
+    "Masažna sjedišta",
+    "Memorija sjedišta",
+    "Panorama",
+    "Xenon",
+    "LED",
+    "Laser",
+    "Ocarinjen",
+    "Udaren",
+    "Stranac"
+]
+
+export default Checkbox;

kivi-cars/src/data/color.js

@@ -0,0 +1,21 @@
+const Color = {
+    "ime": "Boja",
+    "tipovi": [
+        "Bež",
+        "Bijela",
+        "Bordo",
+        "Crna",
+        "Crvena",
+        "Ljubičasta",
+        "Narandžasta",
+        "Plava",
+        "Siva",
+        "Smeđa",
+        "Srebrena",
+        "Zelena",
+        "Zlatna",
+        "Žuta"
+    ]
+}
+
+export default Color;

kivi-cars/src/data/condition.js

@@ -0,0 +1,10 @@
+const Condition = {
+    "ime": "Stanje",
+    "tipovi": [
+        "Novo",
+        "Polovno",
+        "Udareno"
+    ]
+}
+
+export default Condition;

kivi-cars/src/data/doors.js

@@ -0,0 +1,9 @@
+const Doors = {
+    "ime": "Broj vrata",
+    "tipovi" : [
+        "2/3",
+        "4/5"
+    ]
+}
+
+export default Doors;

kivi-cars/src/data/drive.js

@@ -0,0 +1,10 @@
+const Drive = {
+    "ime" : "Pogon",
+    "tipovi": [
+        "Prednji",
+        "Zadnji",
+        "Sva četiri"
+    ]
+}
+
+export default Drive;

kivi-cars/src/data/fuel.js

@@ -0,0 +1,13 @@
+const Fuel = {
+    "ime": "Gorivo",
+    "tipovi": [
+        "Dizel",
+        "Benzin",
+        "Plin",
+        "Cng",
+        "Hybrid",
+        "Elektro"
+    ]
+}
+
+export default Fuel;

kivi-cars/src/data/gearbox.js

@@ -0,0 +1,15 @@
+const Gearbox = {
+    "ime": "Broj brzina",
+    "tipovi": [
+        "3+R",
+        "4+R",
+        "5+R",
+        "6+R",
+        "7+R",
+        "8+R",
+        "9+R",
+        "CVT"
+    ]
+}
+
+export default Gearbox;

kivi-cars/src/data/lights.js

@@ -0,0 +1,12 @@
+const Lights = {
+    "ime": "Svjetla",
+    "tipovi": [
+        "Halogena",
+        "Xenon",
+        "Led",
+        "Laser",
+        "Ostalo"
+    ]
+}
+
+export default Lights;

kivi-cars/src/data/seats.js

@@ -0,0 +1,16 @@
+const Seats = {
+    "ime": "Sjedišta",
+    "tipovi": [
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "Više"
+    ]
+}
+
+export default Seats;

kivi-cars/src/data/sensors.js

@@ -0,0 +1,11 @@
+const Sensors = {
+    "ime": "Senzori",
+    "tipovi": [
+        "naprijed",
+        "nazad",
+        "naprijed i nazad",
+        "nema"
+    ]
+}
+
+export default Sensors;

kivi-cars/src/data/transmission.js

@@ -0,0 +1,10 @@
+const Transmission = {
+    "ime": "Transmisija",
+    "tipovi": [
+        "automatski mjenjač",
+        "manuelni mjenjač",
+        "polu-automatski mjenjač"
+    ]
+}
+
+export default Transmission

kivi-cars/src/data/type.js

@@ -0,0 +1,20 @@
+const Type = {
+    "ime": "Vrsta vozila",
+    "tipovi": [
+        "Karavan",
+        "Limuzina",
+        "Monovolumen",
+        "Malo auto",
+        "Sportback",
+        "Kombi",
+        "Kabriolet",
+        "Coupe",
+        "Terenac",
+        "Off-Road",
+        "Pickup",
+        "Oldtimer",
+        "Caddy"
+    ]
+}
+
+export default Type;