diff --git a/kivi-cars/package-lock.json b/kivi-cars/package-lock.json index 9c74554..bade6b5 100644 --- a/kivi-cars/package-lock.json +++ b/kivi-cars/package-lock.json @@ -11,9 +11,9 @@ "@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-router-dom": "^6.2.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" } @@ -7983,6 +7983,14 @@ "he": "bin/he" } }, + "node_modules/history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -11157,11 +11165,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/nouislider": { - "version": "15.5.1", - "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.5.1.tgz", - "integrity": "sha512-V8LNPhLPXLNjkgXLfyzDRGDeKvzZeaiIx5YagMiHnOMqgcRzT75jqvEZYXbSrEffXouwcEShSd8Vllm2Nkwqew==" - }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -13182,6 +13185,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz", + "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==", + "dependencies": { + "history": "^5.2.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz", + "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==", + "dependencies": { + "history": "^5.2.0", + "react-router": "6.2.2" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", @@ -21738,6 +21765,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "history": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", + "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -24027,11 +24062,6 @@ "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz", "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==" }, - "nouislider": { - "version": "15.5.1", - "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.5.1.tgz", - "integrity": "sha512-V8LNPhLPXLNjkgXLfyzDRGDeKvzZeaiIx5YagMiHnOMqgcRzT75jqvEZYXbSrEffXouwcEShSd8Vllm2Nkwqew==" - }, "npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -25368,6 +25398,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz", + "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==", + "requires": { + "history": "^5.2.0" + } + }, + "react-router-dom": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz", + "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==", + "requires": { + "history": "^5.2.0", + "react-router": "6.2.2" + } + }, "react-scripts": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz", diff --git a/kivi-cars/package.json b/kivi-cars/package.json index 1e76ff2..cdd60a5 100644 --- a/kivi-cars/package.json +++ b/kivi-cars/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-router-dom": "^6.2.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }, diff --git a/kivi-cars/src/components/Button/StandardBtn.js b/kivi-cars/src/components/Button/StandardBtn.js index 6b77082..919232b 100644 --- a/kivi-cars/src/components/Button/StandardBtn.js +++ b/kivi-cars/src/components/Button/StandardBtn.js @@ -1,10 +1,20 @@ import './button.css' const StandardBtn = (props) => { + + const {filtersData, setFiltersData, filter} = props.data + + const clickHandler = ( e ) => { + setFiltersData(prevData => ({ + ...prevData, + [e.target.name]: e.target.value + })) + } + return (
- +
) } diff --git a/kivi-cars/src/components/Button/TitleBtn.js b/kivi-cars/src/components/Button/TitleBtn.js new file mode 100644 index 0000000..a77cca3 --- /dev/null +++ b/kivi-cars/src/components/Button/TitleBtn.js @@ -0,0 +1,13 @@ +import './button.css' + +const StandardBtn = (props) => { + + return ( +
+ + +
+ ) +} + +export default StandardBtn \ No newline at end of file diff --git a/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js b/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js index 416c85b..e127755 100644 --- a/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js +++ b/kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js @@ -1,4 +1,5 @@ import './ButtonsToolbar.css'; +import { Link } from 'react-router-dom' import ArrowLeft from '../Button/leftBtn'; import ArrowRigh from '../Button/rightBtn'; @@ -7,10 +8,15 @@ const ButtonsToolbar = (props) => { return (
- + + +
- + + + +
) diff --git a/kivi-cars/src/components/CategoryBtns/categorybtns.js b/kivi-cars/src/components/CategoryBtns/categorybtns.js index 9c3042f..5178413 100644 --- a/kivi-cars/src/components/CategoryBtns/categorybtns.js +++ b/kivi-cars/src/components/CategoryBtns/categorybtns.js @@ -1,16 +1,25 @@ import './categorybtns.css' import StandardBtn from '../Button/StandardBtn' +import { Link } from 'react-router-dom'; -var auto = 'AUTO'; -var motor = 'MOTOR'; -var kamion = 'KAMION'; const CategoryBtns = (props) => { + + let auto = 'Auto'; + let motor = 'Motor'; + let kamion = 'Kamion'; + let filter = 'Vozilo' + + const {filtersData, setFiltersData} = props.data; + return (
- - - + + + + + +
) diff --git a/kivi-cars/src/components/Filters/Advanced-filters.js b/kivi-cars/src/components/Filters/Advanced-filters.js index 0e5a5f2..25ad906 100644 --- a/kivi-cars/src/components/Filters/Advanced-filters.js +++ b/kivi-cars/src/components/Filters/Advanced-filters.js @@ -1,12 +1,45 @@ import React from "react"; import "./Filters.css"; -import Cars from "../../data/cars"; +import Filter from "./Filter/Filter"; +import Color from '../../data/color'; +import AirCondition from "../../data/air-condition"; +import Seats from "../../data/seats"; +import Sensors from "../../data/sensors"; +import Gearbox from "../../data/gearbox"; +import Lights from "../../data/lights"; +import Checkbox from "./Filter/Checkbox"; +import CheckBox from "../../data/checkbox"; + + +const AdvancedFilters = (props) => { + + const {filtersData, setFiltersData} = props.data + const data = [Color, AirCondition, Seats, Gearbox, Sensors, Lights] + let index = 0 -const AdvancedFilters = () => { return(
- +
+ { + data.map(item => { + index += 1; + return( + + ) + }) + } +
+
+ { + CheckBox.map(item => { + index += 1; + return( + + ) + }) + } +
) } diff --git a/kivi-cars/src/components/Filters/Filter/Checkbox.css b/kivi-cars/src/components/Filters/Filter/Checkbox.css new file mode 100644 index 0000000..2e9dffa --- /dev/null +++ b/kivi-cars/src/components/Filters/Filter/Checkbox.css @@ -0,0 +1,24 @@ +*{ + margin: 0; + padding: 0; +} + +.checkbox-div{ + padding: 0.5em; + text-align: center; +} + +.checkbox-title{ + margin-right: 0.5em +} + +.checkbox{ + width: 20px; + height: 20px; +} + +@media only screen and (min-width: 541px){ + .checkbox-div{ + font-size: 1.5em; + } +} diff --git a/kivi-cars/src/components/Filters/Filter/Checkbox.js b/kivi-cars/src/components/Filters/Filter/Checkbox.js index e69de29..04541c3 100644 --- a/kivi-cars/src/components/Filters/Filter/Checkbox.js +++ b/kivi-cars/src/components/Filters/Filter/Checkbox.js @@ -0,0 +1,26 @@ +import React, { useEffect, useState } from "react"; +import './Checkbox.css'; + +const Checkbox = (props) => { + + + const {filtersData, setFiltersData} = props.data + const [isChecked, setIsChecked] = useState(false) + + + const changeHandler = ( event ) => { + setFiltersData(prevData => ({ + ...prevData, + [event.target.name]: isChecked + })) + } + + return( +
+ + {changeHandler(e); setIsChecked(!isChecked)}}/> +
+ ) +} + +export default Checkbox; \ No newline at end of file diff --git a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js index e13e6a3..3bf64e2 100644 --- a/kivi-cars/src/components/Filters/Filter/DoubleFilter.js +++ b/kivi-cars/src/components/Filters/Filter/DoubleFilter.js @@ -1,19 +1,37 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; import "./DoubleFilter.css"; const DoubleFilter = (props) => { + const defaultV = 0 + const {filtersData, setFiltersData} = props.data + const [doubleFilterData, setDoubleFilterData] = useState({}) + + const changeHandler = ( e ) => { + setDoubleFilterData(prevData => ({ + ...prevData, + [e.target.name]: e.target.value + })) + } + + useEffect(() => { + setFiltersData(prevData => ({ + ...prevData, + [props.title]: doubleFilterData + })) + }, [doubleFilterData]) + return (
- + changeHandler(e)}/>
- + changeHandler(e)}/>
diff --git a/kivi-cars/src/components/Filters/Filter/Filter.js b/kivi-cars/src/components/Filters/Filter/Filter.js index b1bcc93..a5a15b2 100644 --- a/kivi-cars/src/components/Filters/Filter/Filter.js +++ b/kivi-cars/src/components/Filters/Filter/Filter.js @@ -2,13 +2,23 @@ import React from "react"; import './Filter.css'; const Filter = (props) => { + + const {filtersData, setFiltersData} = props.data + + const changeHandler = ( event ) => { + setFiltersData(prevData => ({ + ...prevData, + [event.target.name]: event.target.value + })) + } + return(
- changeHandler(event)}> {props.tipovi.map((tip, i) => { return ( - + ) })} diff --git a/kivi-cars/src/components/Filters/Filters.css b/kivi-cars/src/components/Filters/Filters.css index 45964a0..f64b7f1 100644 --- a/kivi-cars/src/components/Filters/Filters.css +++ b/kivi-cars/src/components/Filters/Filters.css @@ -12,5 +12,36 @@ justify-content: center; } +.filters-content{ + padding: 2em; + width: 90%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + border-bottom: 2px solid #02adba; +} + +.checkbox-content{ + padding: 2em 0.5em; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +@media only screen and (min-width: 541px){ + .filters-content{ + padding: 2em 5em; + } + + .checkbox-content{ + width: ; + } + + +} + diff --git a/kivi-cars/src/components/Filters/Standard-filters.js b/kivi-cars/src/components/Filters/Standard-filters.js index 21d1b81..9daed2f 100644 --- a/kivi-cars/src/components/Filters/Standard-filters.js +++ b/kivi-cars/src/components/Filters/Standard-filters.js @@ -1,5 +1,7 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import "./Filters.css"; +import Filter from "./Filter/Filter"; +import DoubleFilter from "./Filter/DoubleFilter"; import Cars from "../../data/cars"; import Cubes from "../../data/cubes"; import Type from "../../data/type"; @@ -8,63 +10,69 @@ import Transmission from "../../data/transmission"; import Drive from "../../data/drive"; import Condition from "../../data/condition"; import Doors from "../../data/doors"; -import Filter from "./Filter/Filter"; -import DoubleFilter from "./Filter/DoubleFilter"; import Year from "../../data/year"; import Price from "../../data/price"; import HorsePower from "../../data/horsepower"; import Kilowats from "../../data/kilowats"; +import Kilometers from "../../data/kilometers"; -const StandardFilters = () => { +const StandardFilters = (props) => { - let brand_index = 5 - let index = 0 + const {filtersData, setFiltersData} = props.data; + const [brandIndex, setBrandIndex] = useState(0); + let index = 0; const brands = Cars.map(brand => { return brand.brand }) - const models = Cars[brand_index].models + useEffect(() => { + if(filtersData.Marka)setBrandIndex(brands.indexOf(filtersData.Marka)) + }, [filtersData]) + + const models = Cars[brandIndex].models const Brands = { "ime": "Marka", - "tipovi": ["Odaberite", ...brands] + "tipovi": brands } const Models = { - "ime": "Modeli", - "tipovi": ["Odaberite", ...models] + "ime": "Model", + "tipovi": models } + + const data = [Fuel, Type] const data1 = [Transmission, Drive, Condition, Doors] - const data2 = [Price, Year, Cubes, HorsePower, Kilowats] + const data2 = [Price, Year, Kilometers, Cubes, HorsePower, Kilowats] return(
- - + + {data.map(item => { index += 1; return( - + ) })} {data2.map(item => { index += 1; return( - + ) })} {data1.map(item => { index += 1; return( - + ) })}
diff --git a/kivi-cars/src/components/Searchfilters/FiltersNav.css b/kivi-cars/src/components/FiltersNavbar/FiltersNav.css similarity index 95% rename from kivi-cars/src/components/Searchfilters/FiltersNav.css rename to kivi-cars/src/components/FiltersNavbar/FiltersNav.css index 3d3f50c..0adfff3 100644 --- a/kivi-cars/src/components/Searchfilters/FiltersNav.css +++ b/kivi-cars/src/components/FiltersNavbar/FiltersNav.css @@ -15,6 +15,8 @@ .links-container{ background-color: #fff; + position: sticky; + top: 0; } .filters-links{ diff --git a/kivi-cars/src/components/FiltersNavbar/FiltersNav.js b/kivi-cars/src/components/FiltersNavbar/FiltersNav.js new file mode 100644 index 0000000..b7a6e01 --- /dev/null +++ b/kivi-cars/src/components/FiltersNavbar/FiltersNav.js @@ -0,0 +1,22 @@ +import './FiltersNav.css'; + +const FiltersNav = (props) => { + + const {toggle, setToggle} = props.toggle; + + + return( +
+ +
+ ) +} + +export default FiltersNav; \ No newline at end of file diff --git a/kivi-cars/src/components/Header/Header.css b/kivi-cars/src/components/Header/Header.css index da7df41..c583a84 100644 --- a/kivi-cars/src/components/Header/Header.css +++ b/kivi-cars/src/components/Header/Header.css @@ -11,6 +11,7 @@ header { resize: both; padding: 20px; font-size: 25px; + text-align:center; } @media screen and (max-width: 700px) { diff --git a/kivi-cars/src/components/Searchfilters/FiltersNav.js b/kivi-cars/src/components/Searchfilters/FiltersNav.js deleted file mode 100644 index a3d20d0..0000000 --- a/kivi-cars/src/components/Searchfilters/FiltersNav.js +++ /dev/null @@ -1,20 +0,0 @@ -import './FiltersNav.css'; - -const FiltersNav = () => { - - - return( -
- -
- ) -} - -export default FiltersNav; \ No newline at end of file diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js index a5a2ea2..92f39f4 100644 --- a/kivi-cars/src/containers/App.js +++ b/kivi-cars/src/containers/App.js @@ -1,14 +1,37 @@ +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import './css/App.css'; -import React from 'react'; +import { React, useEffect, useState } from 'react'; +import CategoryPage from './CategoryPage'; +import LandingPage from './LandingPage'; +import FiltersPage from './FiltersPage'; +import EmailPage from './EmailPage'; +import CongratsPage from './CongratsPage'; +import LinkR from '../data/routes'; function App() { const info = 'Dobrodosli na stranicu kivi!' + const [filtersData, setFiltersData] = useState({}) + + useEffect(() => { + console.log(filtersData) + }, [filtersData]) + return (
- {/* here import components */} + + + + } /> + }/> + }/> + }/> + }/> + + +
); } diff --git a/kivi-cars/src/containers/CategoryPage.js b/kivi-cars/src/containers/CategoryPage.js index 498e1f2..dba91bf 100644 --- a/kivi-cars/src/containers/CategoryPage.js +++ b/kivi-cars/src/containers/CategoryPage.js @@ -3,16 +3,17 @@ import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar'; import CategoryBtns from '../components/CategoryBtns/categorybtns' import './css/CategoryPage.css' -function CategoryPage() { +function CategoryPage(props) { + + const {filtersData, setFiltersData} = props.data const naslov = 'IZABERITE KATEGORIJU' - return (
- +
- +
); diff --git a/kivi-cars/src/containers/CongratsPage.js b/kivi-cars/src/containers/CongratsPage.js index 2b72241..b953c44 100644 --- a/kivi-cars/src/containers/CongratsPage.js +++ b/kivi-cars/src/containers/CongratsPage.js @@ -1,6 +1,8 @@ import Header from '../components/Header/Header'; import StandardBtn from '../components/Button/StandardBtn'; +import TitleBtn from '../components/Button/TitleBtn'; import './css/CongratsPage.css' +import { Link } from 'react-router-dom'; function CongratsPage() { @@ -10,7 +12,7 @@ function CongratsPage() { return (
-
+

ČESTITAMO! Potvrđeni email je poslat na vašu email adresu.

@@ -21,7 +23,10 @@ function CongratsPage() {

Ako želite novu pretragu idete na

- + + + +
); diff --git a/kivi-cars/src/containers/DataContext.js b/kivi-cars/src/containers/DataContext.js new file mode 100644 index 0000000..d6a8449 --- /dev/null +++ b/kivi-cars/src/containers/DataContext.js @@ -0,0 +1,3 @@ +import {createContext} from 'react'; + + diff --git a/kivi-cars/src/containers/EmailPage.js b/kivi-cars/src/containers/EmailPage.js index 1249ca0..69ed034 100644 --- a/kivi-cars/src/containers/EmailPage.js +++ b/kivi-cars/src/containers/EmailPage.js @@ -1,31 +1,74 @@ +import {useContext, useState, useEffect} from 'react'; +import { DataContext } from './DataContext'; import './css/EmailPage.css' import Header from '../components/Header/Header'; import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar'; import StandardBtn from '../components/Button/StandardBtn'; +import TitleBtn from '../components/Button/TitleBtn'; +import { Link } from 'react-router-dom'; function EmailPage(props) { + + const {filtersData, setFiltersData} = props.data + const [error, setError] = useState(false) + + + const [state, setState] = useState({ + email: "", + confirmEmail: "" + }) + const header = "SLANJE OBAVJEŠTENJA"; - var title1 = 'Odmah'; - var title2 = 'Dnevno'; - var title3 = 'ZAVRŠI'; + let title1 = 'Odmah'; + let title2 = 'Dnevno'; + let title3 = 'ZAVRŠI'; + let errmsg = 'Email does not match!'; + let filter = 'Slanje' + + + const emailCheck = (e, ec) => { + if(e !== "" && e === ec){ + setError(false) + setFiltersData(prevData => ({ + ...prevData, + "email": state.email + })) + return error + }else { + setError(true) + return error + } + } + + const updateInput = (event) => { + setState(prevState => ({ + ...prevState, + [event.target.name]: event.target.value + })) + } + + useEffect(() => { + emailCheck(state.email, state.confirmEmail) + }, [state]) return (
- -
+ +

Slanje obavještenja

- - + +
- - + + +

{error ? errmsg : null}

@@ -36,7 +79,11 @@ function EmailPage(props) {
- + {error ? ( ) : ( + + + + )}
diff --git a/kivi-cars/src/containers/FiltersPage.js b/kivi-cars/src/containers/FiltersPage.js index 9470bce..19d3b12 100644 --- a/kivi-cars/src/containers/FiltersPage.js +++ b/kivi-cars/src/containers/FiltersPage.js @@ -1,20 +1,30 @@ -import React from "react"; +import {React, useState} from "react"; import './css/FiltersPage.css'; import Header from "../components/Header/Header"; import ButtonsToolbar from "../components/ButtonsToolbar/ButtonsToolbar"; -import FiltersNav from '../components/Searchfilters/FiltersNav' +import FiltersNav from '../components/FiltersNavbar/FiltersNav' import StandardFilters from "../components/Filters/Standard-filters"; +import AdvancedFilters from "../components/Filters/Advanced-filters"; -const FiltersPage = () => { +const FiltersPage = (props) => { const naslov = "Filteri za pretrazivanje" + const [toggle, setToggle] = useState(true) + const {filtersData, setFiltersData} = props.data + + const showFilters = (toggle) => { + if(toggle){ + return + } + return ; + } return(
- - - + + + {showFilters(toggle)}
) } diff --git a/kivi-cars/src/containers/LandingPage.js b/kivi-cars/src/containers/LandingPage.js index f71d41c..b3fb552 100644 --- a/kivi-cars/src/containers/LandingPage.js +++ b/kivi-cars/src/containers/LandingPage.js @@ -1,7 +1,8 @@ import logo from '../assets/logo.png' -import StandardBtn from '../components/Button/StandardBtn'; +import TitleBtn from '../components/Button/TitleBtn'; import Header from '../components/Header/Header'; import './css/LandingPage.css' +import { Link } from 'react-router-dom'; function LandingPage() { @@ -21,7 +22,10 @@ function LandingPage() {

BESPLATNO

- + + + +
); diff --git a/kivi-cars/src/containers/css/CongratsPage.css b/kivi-cars/src/containers/css/CongratsPage.css index 7f41dc1..a788081 100644 --- a/kivi-cars/src/containers/css/CongratsPage.css +++ b/kivi-cars/src/containers/css/CongratsPage.css @@ -1,3 +1,10 @@ +.paragh-div{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + .first-paragh { padding-top: 20px; margin-top: 50px; diff --git a/kivi-cars/src/containers/css/EmailPage.css b/kivi-cars/src/containers/css/EmailPage.css index 9a26c1b..81bfa49 100644 --- a/kivi-cars/src/containers/css/EmailPage.css +++ b/kivi-cars/src/containers/css/EmailPage.css @@ -71,4 +71,8 @@ textarea:focus, input:focus{ align-items: center; margin: auto; +} + +.info{ + display: flex; } \ No newline at end of file diff --git a/kivi-cars/src/data/air-condition.js b/kivi-cars/src/data/air-condition.js index 430ed9a..20738c2 100644 --- a/kivi-cars/src/data/air-condition.js +++ b/kivi-cars/src/data/air-condition.js @@ -1,6 +1,7 @@ const AirCondition = { "ime" : "Klima", "tipovi" : [ + "Odaberite", "Jednozonska", "Dvozonska", "Trozonska", diff --git a/kivi-cars/src/data/cars.js b/kivi-cars/src/data/cars.js index d66f609..848c597 100644 --- a/kivi-cars/src/data/cars.js +++ b/kivi-cars/src/data/cars.js @@ -1,4 +1,10 @@ const Cars = [ + { + "brand": "Odaberite", + "models": [ + "Odaberite marku " + ] + }, { "brand": "Acura", "models": [ diff --git a/kivi-cars/src/data/checkbox.js b/kivi-cars/src/data/checkbox.js index 1ade94f..574eede 100644 --- a/kivi-cars/src/data/checkbox.js +++ b/kivi-cars/src/data/checkbox.js @@ -1,4 +1,4 @@ -const Checkbox = [ +const CheckBox = [ "ABS", "ESP", "Tempomat", @@ -12,11 +12,15 @@ const Checkbox = [ "Daljinsko zaključavanje", "ISOFIX", "Registrovan", + "Xenon", + "LED", + "Laser", "Električni podizači stakala", + "Naslon za ruke", "Električni retrovizor", - "Turbo", - "Naslon za ruke", "Start/Stop", + "Turbo", + "Stranac", "Pakring assistent", "Senzor mrtvog ugla", "Servisna knjiga", @@ -26,12 +30,9 @@ const Checkbox = [ "Masažna sjedišta", "Memorija sjedišta", "Panorama", - "Xenon", - "LED", - "Laser", "Ocarinjen", "Udaren", - "Stranac" + ] -export default Checkbox; \ No newline at end of file +export default CheckBox; \ No newline at end of file diff --git a/kivi-cars/src/data/kilometers.js b/kivi-cars/src/data/kilometers.js new file mode 100644 index 0000000..ef2252e --- /dev/null +++ b/kivi-cars/src/data/kilometers.js @@ -0,0 +1,10 @@ +const Kilometers = { + "title": "Kilometraza", + "fields": { + "min": 0, + "max": 1000000, + "step": 1000 + } +} + +export default Kilometers; \ No newline at end of file diff --git a/kivi-cars/src/data/routes.js b/kivi-cars/src/data/routes.js new file mode 100644 index 0000000..d38da33 --- /dev/null +++ b/kivi-cars/src/data/routes.js @@ -0,0 +1,15 @@ +const LinkR = { + "category": { + "prev": "/", + "next": "/filters" + }, + "filters": { + "prev": "/category", + "next": "/email" + }, + "email": { + "prev": "/filters", + "next": "/congrats" + } +} +export default LinkR; \ No newline at end of file