future4code · pdarvas · Oct 22, 2020 · Oct 23, 2020 · Oct 25, 2020 · Oct 25, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt-br">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>LabECommerce</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,84 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import Nav from "./components/nav/nav";
+import Filters from "./components/filters/filters";
+import Products from "./components/products/products";
+import Checkout from "./components/checkout/checkout";
+import styled from "styled-components";
+
+const AppContainer = styled.div`
+  display: flex-row;
+  padding: 0;
+  margin: 0;
+`;
+
+const produtos = [
+
+  {
+    id: 1,
+    name: "Camiseta Infantil Planetas",
+    value: 49.90,
+    imageUrl: "../img/camiseta01.jpg",
+  },
+  {
+    id: 2,
+    name: "Camiseta Gato Astronauta",
+    value: 59.90,
+    imageUrl: "../img/camiseta02.jpg",
+  },
+  {
+    id: 3,
+    name: "Camiseta Astronauta à deriva",
+    value: 59.90,
+    imageUrl: "../img/camiseta03.jpg",
+  },
+  {
+    id: 4,
+    name: "Traje Espacial Infantil",
+    value: 3999.90,
+    imageUrl: "../img/traje-espacial01.jpg",
+  },
+  {
+    id: 5,
+    name: "Traje Espacial Retrô",
+    value: 4599.90,
+    imageUrl: "../img/traje-espacial02.jpg",
+  },
+  {
+    id: 6,
+    name: "Traje Espacial Futurist",
+    value: 4599.90,
+    imageUrl: "../img/traje-espacial03.jpg",
+  },
+  {
+    id: 7,
+    name: "Astronauta Famosinho",
+    value: 69.90,
+    imageUrl: "../img/brinquedo01.jpg",
+  },
+  {
+    id: 8,
+    name: "Astronauta Robô Mark IV",
+    value: 129.90,
+    imageUrl: "../img/brinquedo02.jpg",
+  },
+  {
+    id: 9,
+    name: "Nave Espacial Completa",
+    value: 199.90,
+    imageUrl: "../img/brinquedo03.jpg",
+  }
+
+  ]
+
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <AppContainer>
+      <Nav />
+      <Filters />
+      <Products produtos={produtos}/>
+      <Checkout />
+    </AppContainer>
   );
 }
 

diff --git a/src/components/checkout/checkout.js b/src/components/checkout/checkout.js
@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import CheckoutItemContainer from "./checkoutitem";
+
+const CheckoutContainer = styled.div`
+  display: flex;
+  flex-direction:column;
+  width: 100vw;
+  justify-content: center;
+  align-items: center;
+`;
+
+const CartListContainer = styled.div`
+  display: flex;
+  flex-direction:column;
+  width: 50vw;
+
+  p {
+    align-self: flex-end;
+  }
+
+`;
+
+class Checkout extends React.Component {
+  render() {
+    return (
+      <CheckoutContainer>
+        <h3>Nave de compras</h3>
+        <CartListContainer>
+          <CheckoutItemContainer />
+          <CheckoutItemContainer />
+          <CheckoutItemContainer />
+          <p>Valor total: R$100,00</p>
+        </CartListContainer>
+
+      </CheckoutContainer>
+    );
+  }
+}
+
+export default Checkout;
diff --git a/src/components/checkout/checkoutitem.js b/src/components/checkout/checkoutitem.js
@@ -0,0 +1,28 @@
+import React from "react";
+import styled from "styled-components";
+
+const CheckoutItemContainer = styled.div`
+  display: flex;
+  border: 1px solid black;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    padding: 0 25px;
+  }
+
+`;
+
+class CheckoutItem extends React.Component {
+  render() {
+    return (
+      <CheckoutItemContainer>
+        <p>1x</p>
+        <p>Nome Produto</p>
+        <button>Remover</button>
+      </CheckoutItemContainer>
+    );
+  }
+}
+
+export default CheckoutItem;
diff --git a/src/components/filters/filters.js b/src/components/filters/filters.js
@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+
+const FiltersContainer = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 7vh;
+
+  justify-content: center;
+  align-items: center;
+`;
+
+const InputContainer = styled.label`
+  display: flex;
+  padding: 0 2vw;
+`;
+
+class Filters extends React.Component {
+  render() {
+    return (
+      <FiltersContainer>
+        <div>
+          <InputContainer>
+            Valor mínimo:
+            <input type="number" />
+          </InputContainer>
+        </div>
+
+        <div>
+          <InputContainer>
+            Valor Máximo:
+            <input type="number" />
+          </InputContainer>
+        </div>
+
+        <label>
+          Ordenação:
+          <select>
+            <option>Crescente</option>
+            <option>Decrescente</option>
+          </select>
+        </label>
+
+        <div>
+          <p>Resultados obtidos: 4</p>
+        </div>
+      </FiltersContainer>
+    );
+  }
+}
+
+export default Filters;
diff --git a/src/components/nav/nav.js b/src/components/nav/nav.js
@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+import logosite from "../products/img/logo-labecommerce.png";
+import imgcarrinhocompras from "../products/img/shopping-cart-astronaut.png";
+
+const NavContainer = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 7vh;
+  justify-content: center;
+  align-items: center;
+`;
+
+const InputContainer = styled.label`
+  display: flex;
+  padding: 0 2vw;
+`;
+
+class Nav extends React.Component {
+  render() {
+    return (
+      <NavContainer>
+        <img src={logosite} />
+
+        <div>
+          <InputContainer>
+            Buscar por nome:
+            <input type="text" />
+          </InputContainer>
+        </div>
+
+        <img src={imgcarrinhocompras} />
+      </NavContainer>
+    );
+  }
+}
+
+export default Nav;
diff --git a/src/components/products/img/brinquedo01.jpg b/src/components/products/img/brinquedo01.jpg
diff --git a/src/components/products/img/brinquedo02.jpg b/src/components/products/img/brinquedo02.jpg
diff --git a/src/components/products/img/brinquedo03.jpg b/src/components/products/img/brinquedo03.jpg
diff --git a/src/components/products/img/camiseta01.jpg b/src/components/products/img/camiseta01.jpg
diff --git a/src/components/products/img/camiseta02.jpg b/src/components/products/img/camiseta02.jpg
diff --git a/src/components/products/img/camiseta03.jpg b/src/components/products/img/camiseta03.jpg
diff --git a/src/components/products/img/logo-labecommerce.png b/src/components/products/img/logo-labecommerce.png
diff --git a/src/components/products/img/shopping-cart-astronaut.png b/src/components/products/img/shopping-cart-astronaut.png
diff --git a/src/components/products/img/traje-espacial01.jpg b/src/components/products/img/traje-espacial01.jpg
diff --git a/src/components/products/img/traje-espacial02.jpg b/src/components/products/img/traje-espacial02.jpg
diff --git a/src/components/products/img/traje-espacial03.jpg b/src/components/products/img/traje-espacial03.jpg
diff --git a/src/components/products/products.js b/src/components/products/products.js
@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+import ProductsCardsContainer from "./productscards";
+
+const ProductsContainer = styled.div`
+  display: flex;
+  width: 100vw;
+`;
+
+class Products extends React.Component {
+  render() {
+    return (
+      <ProductsContainer>
+        <ProductsCardsContainer />
+      </ProductsContainer>
+    );
+  }
+}
+
+export default Products;