tentando fazer o carrinho

src/App.js

@@ -25,7 +25,7 @@ export default class App extends React.Component {
 
 
   state = {
-    page: "main"
+    page: "main" 
   }
 
 

src/components/Cards/Cards.js

@@ -52,6 +52,7 @@ export default class CardProduto extends Component {
               item={this.props.product}
               preco={this.props.price}
               adicionarproduto={this.props.adicionarproduto}
+              // add={() => this.props.add()} // testar pra ver se está funcionando - micheline
             />
           </Box>
         </Box>

src/components/Cards/Informacoes.js

@@ -39,7 +39,7 @@ export default function Informacoes(props) {
           </PopoverBody>
           <PopoverFooter>
             <Button
-              onClick={"#F5F4FC"}
+              // onClick={() => this.props.add(servico.id)}// this.props.add        
               bg="#7660C3"
               color="#FFFFFF"
               _hover={{ bg: "" }}

src/components/Cart/Cart.js

@@ -1,14 +1,32 @@
 import React from 'react';
-import { CartMain } from './Styled';
+import { CartMain, ContainerCartItens } from './Styled';
+import CartItens from './CartItens.js'
 
 
 
 export default class Cart extends React.Component{
+    totalValorCart = () => {
+        let total = 0
+        for (let servico of this.props.servicosCarrinho){
+            total += servico.price * 1
+        }
+        return total
+    }
 
     render(){
         return(
             <CartMain>
-                <h1>H</h1>
+               <h1>Carrinho</h1>
+               <hr />
+               <ContainerCartItens>
+                   {this.props.servicosCarrinho.map((servico) => {
+                    return <CartItens cartItemServico = { servico }/> 
+                })}
+               </ContainerCartItens>
+              <hr />
+              <p>Valor total: R$ { this.totalValorCart() },00</p>
+              <br />
+              <button>contratar</button>
             </CartMain>
         )
 

src/components/Cart/CartItens.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ItemContainer } from './Styled';
+
+
+
+
+export default class CartItens extends React.Component{
+
+    render(){
+        return(
+            <div>
+                <ItemContainer>
+                        <p>{this.props.cartItemServico.title}</p>
+                        <p>R$ {this.props.cartItemServico.price},00</p>
+                        <p><button>Remover</button></p>
+                </ItemContainer>
+
+            </div>
+        )
+
+
+    }
+}

src/components/Cart/Styled.js

@@ -2,5 +2,22 @@ import styled from "styled-components";
 
 
 export const CartMain = styled.div`
-    background-color: purple;
-`
+padding: 1px;
+margin: 10px;
+border: 1px solid black;
+p{
+   padding-top:20px;
+}
+`
+
+export const ContainerCartItens= styled.div`
+display: grid;
+gap: 4px;
+`
+
+export const ItemContainer = styled.div `
+display: grid;
+grid-template-columns: repeat(3, 1fr);
+gap: 10px;
+align-items: center;
+`

src/components/pages/MainPage/MainPage.js

@@ -30,7 +30,7 @@ export default class MainPage extends React.Component{
                             colorScheme="purple" 
                             variant="solid"
                             onClick={this.selectNinjaPage}
-                            >Seja Ninja
+                            >Seja um Ninja
                             </Button>
                             <Button 
                             colorScheme="purple" 

src/components/pages/NinjaPage/NinjaPage.js

@@ -114,7 +114,7 @@ export default class NinjaPage extends React.Component {
         return (
             <Main>
                 <HeaderContainer>
-                <Header texto={'Nossos Serviços'} troca={this.userPage}/>
+                <Header texto={'Contrate um Ninja'} troca={this.userPage}/>
                 </HeaderContainer>
                 <NinjaForm>
                     <h1>Seja Um Ninja:</h1>

src/components/pages/UserPage/Styled.js

@@ -118,4 +118,5 @@ export const ContainerProducts = styled.div`
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   width: 80vw;
-`;
+`;
+

src/components/pages/UserPage/UserPage.js

@@ -2,6 +2,9 @@ import React from "react";
 import CardProduto from "../../Cards/Cards";
 import Header from "../../Header/Header";
 import styled from 'styled-components';
+import Cart from '../../Cart/Cart.js'
+import axios from "axios"
+
 
 const ContainerProducts = styled.div`
   display: grid;
@@ -13,24 +16,78 @@ padding: 20px;
 margin-top: 10px;
 margin-left: 30px;
 `
+const ProductCart = styled.div `
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+`
+const Auth = 'd2941f53-4b06-40c4-a403-922f99164edc'
+const baseURL= 'https://labeninjas.herokuapp.com'
 
 export default class UserPage extends React.Component {
+  state={
+    servicosCadastrados:[],
+    servicosCart:[
+      {
+          title:'Cortar grama',
+          price:'20'
+
+    },
+    {
+      title:'Cortar grama',
+      price:'20'
+
+},
+{
+  title:'Cortar grama',
+  price:'20'
+
+}
+  ]
+  }
+
   ninjaPage = () => {
     this.props.choosePage("ninja");
   };
 
+  componentDidMount(){
+    this.getAllJobs();
+  }
+
+  getAllJobs = async () =>{
+    const header = {
+      headers:{
+        Authorization: Auth
+      }
+    };
+    axios.get(`${baseURL}/jobs`, header)
+    .then((res) => {
+      this.setState({servicosCadastrados: res.data.jobs})
+      console.log('produtos cadastrados',this.state.servicosCadastrados)
+
+    })
+    .catch((err) => {
+      // alert(err)
+    })
+  }
+
+
+
+
   render() {
     return (
       <div>
         <Header texto={"Seja um Ninja"} troca={this.ninjaPage} />
-        <ContainerProducts>
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-          <CardProduto />
-        </ContainerProducts>
+        <ProductCart>
+          <ContainerProducts>
+            <CardProduto /> 
+            <CardProduto />
+            <CardProduto />
+            <CardProduto />
+            <CardProduto />
+            <CardProduto />
+          </ContainerProducts>
+          <Cart servicosCarrinho={this.state.servicosCart}/>
+        </ProductCart>
       </div>
     );
   }