Lab 7

App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

App.js

@@ -0,0 +1,33 @@
+import './App.css';
+import { Header } from "./components/Header/Header";
+import { Home } from "./components/Home/Home";
+import { Footer } from "./components/Footer/Footer";
+import { Catalog } from './components/Catalog/Catalog'; 
+import {BrowserRouter, Switch, Route,} from "react-router-dom";
+import { Filter } from "./components/Filter/Filter";
+
+function App() {
+  return (
+      <BrowserRouter>
+          <div>
+              <Switch>
+                  <Route exact path="/">
+                      <Header isHomePage={true}/>
+                      <Home/>
+                  </Route>
+                  <Route path="/catalog">
+                      <Header isHomePage={false}/>
+                      <Filter/>
+                      <Catalog/>
+                  </Route>
+                  <Route path="/cart">
+                      <Header isHomePage={true}/>
+                  </Route>
+              </Switch>
+              <Footer/>
+          </div>
+      </BrowserRouter>
+  );
+}
+
+export default App;

App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

README.md

@@ -1 +1,16 @@
-# React_Labs
+# React.js: Catalog page
+## Description: Continue work on your React App by adding a page with 
+Items list (see the link to wireframe of Catalog page above).
+### Variants - (products that you are ‘selling’) the same as for previous works.
+(see the description to 3rd work)
+## Requirements: 
+- All of the requirements for previous React.js works should be kept.
+### Code style: 
+- Use array.map() method for rendering your items list
+- Routing (switching between pages) should work now. 
+- Use react-router-dom library: 
+[https://reactrouter.com/web/guides/quick-start]
+- All UI elements (buttons / select) should have corresponding 
+  React components (PrimaryButton.jsx / Select.jsx  etc.)
+- Functionality (filter / search / view more) is still not required (you 
+have to complete it on next works)

components/Catalog/Catalog.js

@@ -0,0 +1,45 @@
+import { CatalogItem } from "../CatalogItem/CatalogItem";
+import { Wrapper } from "./Catalog.styles";
+import GoldCreekPond from "../../icons/GoldCreekPond.jpg";
+import AppenzellDistrict from "../../icons/AppenzellDistrict.jpg";
+import Uttarakhand from "../../icons/Uttarakhand.jpg";
+import Algeria from "../../icons/Algeria.jpg";
+
+
+let items = [
+    {
+        name: "Gold Creek Pond",
+        price: 1200,
+        country: "USA",
+        image: GoldCreekPond
+    },
+    {
+        name: "Appenzell District",
+        price: 700,
+        country: "Switzerland",
+        image: AppenzellDistrict
+    },
+    {
+        name: "Uttarakhand",
+        price: 890,
+        country: "India",
+        image: Uttarakhand
+    },
+    {
+        name: "Algeria",
+        price: 2500,
+        country: "Algeria",
+        image: Algeria
+    },
+]
+
+export const Catalog = () => {
+    return (
+        <Wrapper>
+            {
+                items.map(item => (
+                    <CatalogItem name={item.name} country={item.country} price={item.price}  image={item.image}/>))
+            }
+        </Wrapper>
+    );
+}

components/Catalog/Catalog.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+    display: flex;
+    justify-content: space-around;
+    padding: 20px 50px;
+    flex-wrap: wrap;
+`

components/CatalogItem/CatalogItem.js

@@ -0,0 +1,23 @@
+import {
+    Wrapper,
+    TextWrapper,
+    Image,
+    Label,
+    Text,
+    Button,
+
+} from "./CatalogItem.styles";
+
+export const CatalogItem = (props) => {
+    return (
+        <Wrapper>
+            <Image src={props.image}></Image>
+            <TextWrapper>
+                <Label>{props.name}</Label>
+                <Text>{props.country}</Text>
+                <Text>Price: {props.price}$</Text>
+            </TextWrapper>
+            <Button>View more</Button>
+        </Wrapper>
+    );
+}

components/CatalogItem/CatalogItem.styles.js

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    background-color: #f3f3f3;
+    border-radius: 25px;
+    padding: 10px;
+    text-align: center;
+    margin: 10px;
+`
+
+export const TextWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 20px;
+    flex-direction: column;
+`
+
+export const Image = styled.img`
+    width: 400px;
+    height: 300px;
+    border-radius: 15px;
+`
+
+export const Label = styled.h2`
+    margin: 10px;
+`
+
+export const Text = styled.h3`
+    font-weight: 400;
+    align-self: center;
+`
+
+export const Button = styled.button`
+    padding: 10px 6px;
+    left: 50%;
+    background-color: #f3f3f3;
+    border: solid #c4c4c4 1px;
+    border-radius: 10px;
+    width: 30%;
+    transform: translate(120%, 0);
+    &:hover {
+        box-shadow: 0 0 8px #777676;
+    }
+`
+
+
+

components/Filter/Filter.js

@@ -0,0 +1,42 @@
+import { 
+    ApplyButton, 
+    FilterSelector, 
+    FilterWrapper, 
+    HorLine, 
+    LabelText, 
+    Wrapper 
+} from "./Filter.styles";
+
+
+export const Filter = () => {
+    return (
+        <div>
+            <HorLine/>
+            <Wrapper>
+                <FilterWrapper>
+                    <LabelText>Sort by:</LabelText>
+                    <FilterSelector>
+                        <option selected>Choose filter:</option>
+                        <option value="Somethong">Price</option>
+                        <option value="Something">Country</option>
+                    </FilterSelector>
+                    <LabelText>Order by:</LabelText>
+                    <FilterSelector>
+                        <option selected>Choose order:</option>
+                        <option value="Something">Ascending</option>
+                        <option value="Something">Descending</option>
+                    </FilterSelector>
+                    <LabelText>Price:</LabelText>
+                    <FilterSelector>
+                        <option selected>Choose price:</option>
+                        <option value="Something">&lt;1000</option>
+                        <option value="Something">1000-3000</option>
+                        <option value="Something">&gt;3000</option>
+                    </FilterSelector>
+                </FilterWrapper>
+                <ApplyButton>Apply</ApplyButton>
+            </Wrapper>
+            <HorLine style={{marginTop: '10px'}}/>
+        </div>
+    );
+}

components/Filter/Filter.styles.js

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+    display: flex;
+    padding: 5px 80px;
+`
+
+export const FilterWrapper = styled.div`
+    display: flex;
+    flex: 10;
+`
+
+export const FilterSelector = styled.div`
+    margin-right: 40px;
+    padding: 10px 32px;
+    border-radius: 10px;
+    border: solid #c4c4c4 1px;
+`
+
+export const LabelText = styled.h4`
+    margin: 0 30px;
+    align-self: center;
+`
+
+export const ApplyButton = styled.button`
+    padding: 18px 32px;
+    background-color: #f3f3f3;
+    flex: 1;
+    border: solid #c4c4c4 1px;
+    border-radius: 10px;
+    &:hover {
+        box-shadow: 0 0 8px #777676;
+    }
+`
+
+export const HorLine = styled.hr`
+    margin-top: 0;
+`

components/Footer/Footer.js

@@ -0,0 +1,21 @@
+import { FooterWrapper, HorizontalLine, Links, StyledText, WrapperLogo } from "./Footer.styles";
+import {InstagramOutlined, YoutubeOutlined, FacebookOutlined} from '@ant-design/icons'
+import Logo from "../../icons/logo.jpg";
+
+export const Footer = () => {
+    return (
+        <div style={{textAlign: 'center'}}>
+            <HorizontalLine/>
+            <FooterWrapper>
+                <WrapperLogo src={Logo} alt="logo"></WrapperLogo>
+                <Links>
+                    <InstagramOutlined style={{margin: '10px'}}/>
+                    <YoutubeOutlined style={{margin: '10px'}}/>
+                    <FacebookOutlined style={{margin: '10px'}}/>
+                </Links>
+            </FooterWrapper>
+            <HorizontalLine style={{marginTop: '0px', width: '80vw'}}/>
+            <StyledText>2021 IoT @ Copyright all rights reserved</StyledText>
+        </div>
+    );
+}

components/Footer/Footer.styles.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const FooterWrapper = styled.div`
+    display: flex;
+    justify-content: space-around;
+`
+export const HorizontalLine = styled.hr`
+    margin-top: 110px;
+`
+
+export const WrapperLogo = styled.img`
+    width: 80px;
+    height: 80px;
+    border-radius: 50px;
+`
+
+export const Links = styled.ul`
+    display: flex;
+    list-style: none;
+    padding: 0;
+`
+export const StyledText = styled.p`
+    font-size: 12px;
+`