add admin layout

Author: fluid14

.eslintignore

@@ -0,0 +1 @@
+src/components/Slider/Slider.js

package-lock.json

@@ -6,22 +6,27 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
     "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
     "eslint": "^6.6.0",
+    "formik": "^2.1.4",
+    "google-map-react": "^1.1.7",
+    "google-maps": "^4.2.3",
+    "google-maps-react": "^2.0.2",
     "hamburgers": "^1.1.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-hamburgers": "^1.0.0",
     "react-redux": "^7.1.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.1",
     "reactstrap": "^8.4.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.0.1",
-    "styled-normalize": "^8.0.7"
+    "styled-normalize": "^8.0.7",
+    "swiper": "^5.3.6"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const ContactWrap = styled.div`
+  width: 100%;
+  background-color: var(--light);
+  padding: 20px 40px;
+`;
+
+const Title = styled.h1`
+  font-weight: 700;
+  /* text-align: center; */
+  letter-spacing: 5px;
+  margin-bottom: 1.5em;
+`;
+
+const Info = styled.p`
+  display: block;
+  font-weight: 500;
+  font-size: 18px;
+  color: #000;
+  transition: 0.3s ease;
+  &:hover {
+    opacity: 0.5;
+    color: #000;
+    text-decoration: none;
+  }
+
+  & span {
+    font-weight: 300;
+  }
+`;
+
+const Contact = ({ mail, phone, street, zip, city }) => (
+  <ContactWrap>
+    <Title>Skontaktuj się z nami!</Title>
+    <Info as="a" href={`mailto: ${mail}`}>
+      Email: <span>{mail}</span>
+    </Info>
+    <Info as="a" href={`tel: ${phone}`}>
+      Numer telefonu: <span>{phone}</span>
+    </Info>
+    <Info>
+      Adress:{' '}
+      <span>
+        ul.{street}, {zip} {city}
+      </span>
+    </Info>
+  </ContactWrap>
+);
+
+Contact.propTypes = {
+  mail: PropTypes.string.isRequired,
+  phone: PropTypes.string.isRequired,
+  street: PropTypes.string.isRequired,
+  zip: PropTypes.string.isRequired,
+  city: PropTypes.string.isRequired,
+};
+
+export default Contact;

src/assets/image/layouts/article.png

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Swiper from 'swiper';
+import Image from 'components/Image/Image';
+import 'swiper/css/swiper.css';
+import { Col } from 'reactstrap';
+
+const SlideTitle = styled.p`
+  color: #ffffff;
+  font-size: 14px;
+  background-color: #000;
+  font-size: 700;
+  padding: 10px 20px;
+`;
+
+class Slider extends React.Component {
+  componentDidMount() {
+    // eslint-disable-next-line
+    const mySwiper = new Swiper('.swiper-container', {
+      direction: 'horizontal',
+      loop: true,
+      slidesPerView: 'auto',
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+      },
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+    });
+  }
+
+  render() {
+    const { data } = this.props;
+    return (
+      <div className="swiper-container">
+        <div className="swiper-wrapper">
+          {data.map(item => {
+            return (
+              <Col key={item.title} md="3" className="swiper-slide mb-5">
+                <Image src={item.url} />
+                <SlideTitle>{item.title}</SlideTitle>
+              </Col>
+            );
+          })}
+        </div>
+        <div className="swiper-pagination"></div>
+        <div className="swiper-button-prev"></div>
+        <div className="swiper-button-next"></div>
+      </div>
+    );
+  }
+}
+
+Slider.propType = {
+  data: PropTypes.array.isRequired,
+};
+
+export default Slider;

src/assets/image/layouts/articleBottom.png

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+const StyledLink = styled(Link)`
+  display: block;
+  font-size: 1.5rem;
+  color: var(--dark);
+  font-weight: 500;
+  margin-bottom: 0.7em;
+  transition: 0.3s ease;
+
+  &:hover {
+    color: var(--gray);
+    text-decoration: none;
+  }
+`;
+
+const LinkAdmin = ({ children, link }) => <StyledLink to={link}>{children}</StyledLink>;
+
+LinkAdmin.propTypes = {
+  children: PropTypes.element.isRequired,
+  link: PropTypes.string.isRequired,
+};
+
+export default LinkAdmin;

src/assets/image/layouts/articleTiles.png

@@ -8,13 +8,19 @@ const Wrap = styled.div`
   text-align: center;
 `;
 
-const MainTitle = ({ children }) => (
-  <Wrap>
+const MainTitle = ({ children, className }) => (
+  <Wrap className={className}>
     <Title>{children}</Title>
   </Wrap>
 );
 
 MainTitle.propTypes = {
   children: PropTypes.element.isRequired,
+  className: PropTypes.string,
 };
+
+MainTitle.defaultProps = {
+  className: '',
+};
+
 export default MainTitle;