Component extend styles

src/components-patten/components/ProductButtons.tsx

@@ -0,0 +1,19 @@
+import styles from "../styles/styles.module.css";
+import React, { createContext, ReactElement, useContext } from "react";
+import { ProductContext } from "./ProductCard";
+
+export const ProductButtons = ({ className }: { className: string }) => {
+  const { increaseBy, counter } = useContext(ProductContext);
+
+  return (
+    <div className={`${styles.buttonsContainer} ${className}`}>
+      <button className={styles.buttonMinus} onClick={() => increaseBy(-1)}>
+        -
+      </button>
+      <div className={styles.countLabel}>{counter} </div>
+      <button className={styles.buttonAdd} onClick={() => increaseBy(+1)}>
+        +{" "}
+      </button>
+    </div>
+  );
+};

src/components-patten/components/ProductCard.tsx

@@ -0,0 +1,23 @@
+import React, { createContext, ReactElement, useContext } from "react";
+import styles from "../styles/styles.module.css";
+import useProduct from "../hooks/useProduct";
+import { Props, ProductContextProps } from "../interfaces/interfaces";
+export const ProductContext = createContext({} as ProductContextProps);
+const { Provider } = ProductContext;
+
+const ProductCard = ({ children, product, className }: Props) => {
+  const { counter, increaseBy } = useProduct();
+  return (
+    <Provider value={{ counter, increaseBy, product }}>
+      <div className={styles.productCard}>
+        {children}
+        <span className={`${styles.productDescription} ${className}`}>
+          {" "}
+          {product.title}
+        </span>
+      </div>
+    </Provider>
+  );
+};
+
+export default ProductCard;

src/components-patten/components/ProductImage.tsx

@@ -0,0 +1,22 @@
+import styles from "../styles/styles.module.css";
+import React, { createContext, ReactElement, useContext } from "react";
+import noImage from "../assets/no-image.jpg";
+import { ProductContext } from "./ProductCard";
+
+export const ProductImage = ({
+  img = "",
+  className,
+}: {
+  img: string;
+  className?: string;
+}) => {
+  const { product } = useContext(ProductContext);
+  let imgToShow = img ? img : product.img;
+  return (
+    <img
+      className={`${styles.productImg} ${className}`}
+      src={imgToShow ? imgToShow : noImage}
+      alt="Coffee"
+    />
+  );
+};

src/components-patten/hooks/useProduct.ts

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+
+const useProduct = () => {
+  const [counter, setCounter] = useState(0);
+
+  const increaseBy = (value: number) => {
+    setCounter((prev: number) => Math.max(prev + value, 0));
+  };
+  return { counter, increaseBy };
+};
+
+export default useProduct;

src/components-patten/interfaces/interfaces.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from "react";
+
+export interface Props {
+  product: Product;
+  children?: ReactElement | ReactElement[];
+  className?: string;
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  img?: string;
+}
+
+export interface ProductContextProps {
+  counter: number;
+  increaseBy: (value: number) => void;
+  product: Product;
+}

src/components-patten/pages/ShoppingPage.tsx

@@ -0,0 +1,25 @@
+import { ProductButtons } from "../components/ProductButtons";
+import ProductCard from "../components/ProductCard";
+import { ProductImage } from "../components/ProductImage";
+import "../styles/custom-styles.css";
+const product = {
+  id: "2",
+  title: "jugaso ",
+  img: "./coffee-mug.png",
+};
+const ShoppingPage = () => {
+  return (
+    <div>
+      <h2>Shopping Card</h2>
+      <hr></hr>
+      <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
+        <ProductCard product={product} className="bg-dark">
+          <ProductImage className="custom-image" img={""} />
+          <ProductButtons className="custom-buttons" />
+        </ProductCard>
+      </div>
+    </div>
+  );
+};
+
+export default ShoppingPage;

src/components-patten/styles/custom-styles.css

@@ -0,0 +1,15 @@
+.bg-dark {
+  background-color: rgb(56, 56, 56);
+}
+.text-white {
+  color: white;
+}
+.custom-image {
+  border-radius: 20px;
+  padding: 10px;
+  width: calc(100% - 20px);
+}
+
+.custom-buttons button {
+  color: red;
+}

src/components-patten/styles/styles.module.css

@@ -0,0 +1,62 @@
+
+
+.productCard {
+    background-color: white;
+    border-radius: 15px;
+    color: black;
+    padding-bottom: 5px;
+    width: 250px;
+    margin-right: 5px;
+    margin-top: 5px;
+}
+
+.productImg {
+    border-radius: 15px 15px 0px 0px;
+    width: 100%;
+}
+
+.productDescription {
+    margin: 10px;
+}
+
+.buttonsContainer {
+    margin: 10px;
+    display: flex;
+    flex-direction: row;
+}
+
+.buttonMinus {
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 5px 0px 0px 5px;
+    font-size: 20px;
+    width: 30px;
+}
+
+.buttonMinus:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.countLabel {
+    border-bottom: 1px solid black;
+    border-top: 1px solid black;
+    font-size: 16px;
+    height: 25px;
+    padding-top: 5px;
+    text-align: center;
+    width: 30px;
+}
+
+.buttonAdd {
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 0px 5px 5px 0px;
+    font-size: 20px;
+    width: 30px;
+}
+
+.buttonAdd:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}

src/routes/Navigation.tsx

@@ -1,45 +1,33 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  NavLink
-} from 'react-router-dom';
+import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
+import ShoppingPage from "../components-patten/pages/ShoppingPage";
 
-import logo from '../logo.svg';
+import logo from "../logo.svg";
 
 export const Navigation = () => {
   return (
-    <Router>
+    <BrowserRouter>
       <div className="main-layout">
         <nav>
-            <img src={ logo } alt="React Logo" />
+          <img src={logo} alt="React Logo" />
           <ul>
             <li>
-              <NavLink to="/" activeClassName="nav-active" exact>Home</NavLink>
+              <NavLink to="/">Shopping</NavLink>
             </li>
             <li>
-              <NavLink to="/about" activeClassName="nav-active" exact>About</NavLink>
+              <NavLink to="/about">About</NavLink>
             </li>
             <li>
-              <NavLink to="/users" activeClassName="nav-active" exact>Users</NavLink>
+              <NavLink to="/users">Users</NavLink>
             </li>
           </ul>
         </nav>
 
-        {/* A <Switch> looks through its children <Route>s and
-            renders the first one that matches the current URL. */}
-        <Switch>
-          <Route path="/about">
-            <h1>About</h1>
-          </Route>
-          <Route path="/users">
-            <h1>Users</h1>
-          </Route>
-          <Route path="/">
-            <h1>Home</h1>
-          </Route>
-        </Switch>
+        <Routes>
+          <Route path="/about" element={<div> about</div>}></Route>
+          <Route path="/users" element={<div> Users</div>}></Route>
+          <Route path="/" element={<ShoppingPage />}></Route>
+        </Routes>
       </div>
-    </Router>
+    </BrowserRouter>
   );
-}
+};