Merge branch 'createbuttonstoolbar' into 'main'

add buttons, buttonstoolbar

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

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/leftBtn.js

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

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

@@ -0,0 +1,20 @@
+.buttons-toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.left-group {
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+}
+
+.right-group {
+    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/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/Info/Info.css

@@ -1,10 +0,0 @@
-nav {
-    width: 100%;
-    min-width: 280px;
-    background-color: #02adba;
-    color: #fff;
-    height: 54px;
-    line-height: 54px;
-    text-align: center;
-}
-

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

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

kivi-cars/src/containers/App.js

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