Semana 8 gabriel

.eslintrc.json

@@ -29,7 +29,7 @@
         ],
         "linebreak-style":[
             "error",
-            "unix"
+            "windows"
         ],
         "quotes":[
             "error",

package.json

@@ -10,11 +10,14 @@
     "@types/node": "^16.11.38",
     "@types/react": "^18.0.10",
     "@types/react-dom": "^18.0.5",
+    "components": "^0.1.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.3",
+    "styled": "^1.0.0",
+    "styled-components": "^5.3.5",
     "typescript": "^4.7.2",
     "web-vitals": "^2.1.4"
   },
@@ -43,6 +46,7 @@
     ]
   },
   "devDependencies": {
+    "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "eslint": "^8.17.0",

src/GlobalStyle.ts

@@ -0,0 +1,12 @@
+import { createGlobalStyle } from 'styled-components';
+import { font_family_page } from './Variables';
+
+export const GlobalStyle = createGlobalStyle`
+body{
+    font-family: $font-family-page;
+        text-decoration: none;
+        overflow-x:hidden ;
+        scroll-behavior: smooth;
+}
+
+`;

src/Variables.ts

@@ -0,0 +1,21 @@
+export const primary_color = '#FFEF82';
+
+export const secondary_color = '#EFD345';
+
+export const tertiary_color = '#BABD42';
+
+export const quaternary_color = '#82954B';
+
+export const font_size_text = '1em';
+
+export const font_size_title = '3em';
+
+export const font_size_subtitle = '4em';
+
+export const font_family_page = '\'Roboto\', sans serif';
+
+export const font_weight_text = '300';
+
+export const font_weight_title = 'bold';
+
+

src/pages/cart/BillingReview/BillingReview.tsx

@@ -1,31 +1,32 @@
-import { cartState } from 'pages/state/atoms/cartState';
 import { useRecoilValue } from 'recoil';
-import style from './BillingReview.module.scss';
+import { cartState } from 'state/atoms/dynamic/cartState';
+import { ButtonPayment, ReviewPayment, ReviewPaymentConfig } from './BillingReviewStyle';
 
 export function BillingReview() {
-
   const getCart = useRecoilValue(cartState);
   const cart = [...getCart];
-  const total = cart.reduce((acc, currentValue) => (acc += currentValue.price),0);
+  const total = cart.reduce(
+    (acc, currentValue) => (acc += (currentValue.price*currentValue.units_in_cart)),
+    0
+  );
 
   return (
-
-
-    <div className={style.review__payment}>
-      <div className={style['review__payment--config']}>
+    <ReviewPayment>
+      <ReviewPaymentConfig>
         {cart.map((productsInCart) => {
           return (
             <>
-              <p key={productsInCart.id} >2x{(productsInCart.price + productsInCart.price * 0.1).toFixed(2)} = R$ {productsInCart.price.toFixed(2)}</p>
-
+              <p key={productsInCart.id}>
+                {productsInCart.units_in_cart}x
+                {(productsInCart.price).toFixed(2)}{' '}
+                = R$ {(productsInCart.price*productsInCart.units_in_cart).toFixed(2)}
+              </p>
             </>
           );
-        })}
+        })} 
         <p>Total: R${total.toFixed(2)}</p>
-        <button>Ir para pagamento</button>
-      </div>
-
-
-    </div>
+        <ButtonPayment as='button'>Ir para pagamento</ButtonPayment>
+      </ReviewPaymentConfig>
+    </ReviewPayment>
   );
-}
+}

src/pages/cart/BillingReview/BillingReviewStyle.tsx

@@ -0,0 +1,40 @@
+import { CartButtonDetails } from '../../components/Button/ButtonStyle';
+import styled from 'styled-components';
+import { font_size_text, font_weight_text, primary_color, tertiary_color } from 'Variables';
+
+export const ReviewPayment = styled.div`
+  width: 100%;
+  button {
+    display: block;
+    margin: auto;
+    margin-top: 159%;
+    border: none;
+    height: 3em;
+    background-color: $tertiary-color;
+  }
+
+  button:hover { 
+    color: white;
+    cursor: pointer;
+  }
+`;
+
+export const ReviewPaymentConfig = styled.div`
+  height: 100%;
+  padding: 11%;
+  padding-top: 0;
+  text-align: center;
+  font-weight: ${font_weight_text};
+  font-size:calc(${font_size_text}*1.5);
+  background-color: ${tertiary_color};
+`;
+
+export const ButtonPayment = styled(CartButtonDetails)`
+background-color:${primary_color};
+width: 205px;
+color:black;
+&:hover{
+  border: 1px solid ${primary_color};
+  background-color:transparent;
+}
+`;

src/pages/cart/CartIndex.tsx

@@ -1,16 +1,10 @@
 import { ProductReview } from './ProductReview/ProductReview';
 
 export function Cart() {
-  return <>
-
+  return (
     <main>
-
-      <h1>Minha sacola</h1> 
-      <section className="review">
-        <ProductReview/>
-      </section>
-
+      <h1>Minha sacola</h1>
+      <ProductReview />
     </main>
-
-  </>;
-}
+  );
+}

src/pages/cart/InfoReview/InfoReview.tsx

@@ -1,43 +1,40 @@
-
-import { cartState } from 'pages/state/atoms/cartState';
 import { useRecoilValue } from 'recoil';
-import { ImageProductReview } from '../ImageProductReview/ImageProductReview';
+import { cartState } from 'state/atoms/dynamic/cartState';
 import style from './InfoReview.module.scss';
+import {
+  InfoReviewContent,
+  InfoReviewTemplate,
+  InfoReviewTitle,
+} from './InfoReviewStyle';
 import { ReviewItem } from './ReviewItem/ReviewItem';
 import { ReviewTitle } from './ReviewTitle/ReviewTitle';
 
 export function InfoReview() {
-
   const getItem = useRecoilValue(cartState);
 
   const productsInCart = [...getItem];
 
-
   //console.log(productsOnCart)
   return (
-    <div className={`${style.review__info}`}>
-
+    <InfoReviewTemplate>
       <>
-        <div className={style['review__info--title']} >
+        <InfoReviewTitle>
           <ReviewTitle />
-
-        </div>
-        {
-          productsInCart.map((product, productCartindex) => {
-            return (
-              <div key={product.id} className={style['review__info--item']}>
-
-                <ReviewItem
-                  //melhorar esse codigo 
-
-                  item={productsInCart.find((_, indice) => indice === productCartindex)}
-                />
-              </div>
-
-            );
-          })
-        }
+        </InfoReviewTitle>
+        {productsInCart.map((product, productCartindex) => {
+          return (
+            <InfoReviewContent key={product.id}>
+              <ReviewItem
+                //melhorar esse codigo
+
+                item={productsInCart.find(
+                  (_, indice) => indice === productCartindex
+                )}
+              />
+            </InfoReviewContent>
+          );
+        })}
       </>
-    </div>
+    </InfoReviewTemplate>
   );
-}
+}

src/pages/cart/InfoReview/InfoReviewStyle.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const InfoReviewTemplate = styled.div`
+  display: grid;
+  grid-template-columns: 3fr;
+  grid-template-rows: 1fr auto;
+  padding: 0 1%;
+  width:100%;
+`;
+
+export const InfoReviewTitle = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+`;
+
+export const InfoReviewContent = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-around;
+`;

src/pages/cart/InfoReview/ReviewItem/AddButton/AddButton.tsx

@@ -1,4 +1,4 @@
-import { CartProducts } from '../../../../state/atoms/cartState';
+
 import { updateValues } from '../../../../utils/updateValue';
 import { ProductsInCartProps } from '../ReviewItem';