✨ Mostrando productos en productDetail

Author: Klauditha

src/Components/Card/Card.jsx

@@ -6,8 +6,13 @@ const Card = (data) => {
 
   const context = useContext(ShoppingCartContext);
 
+  const showProduct = (productDetail) => {
+    context.openProductDetails();
+    context.setProductToShow(productDetail);
+  }
+
   return (
-    <div className="bg-white cursor-pointer w-56 h-60 rounded-lg" onClick={() => context.openProductDetails()}>
+    <div className="bg-white cursor-pointer w-56 h-60 rounded-lg" onClick={() => showProduct(data.data)}>
       <figure className="relative mb-2 w-full h-4/5">
         <span className="absolute bottom-0 left-0 bg-white/60 rounded-lg text-black text-xm m-2 px-3 py-0.5">
           {data.data.category.name}

src/Components/ProductDetail/ProductDetail.jsx

@@ -5,6 +5,7 @@ import { ShoppingCartContext } from "../../Context/Context";
 
 const ProductDetail = () => {
   const context = useContext(ShoppingCartContext);
+  console.log("PRODUCT TO SHOW", context.productToShow);
   return (
     <aside
       className={`${
@@ -13,8 +14,31 @@ const ProductDetail = () => {
     >
       <div className="flex justify-between items-center p-6">
         <h2 className="font-medium text-xl"> Detail</h2>
-        <XMarkIcon className="h-6 w-6 text-black" onClick={context.closeProductDetails}></XMarkIcon>
+        <div>
+          <XMarkIcon
+            className="h-6 w-6 text-black cursor-pointer"
+            onClick={context.closeProductDetails}
+          ></XMarkIcon>
+        </div>
       </div>
+      <figure className="px-6">
+        <img
+          className="w-full h-full rounded-lg"
+          src={context.productToShow.images[0]}
+          alt={context.productToShow.title}
+        />
+      </figure>
+      <p className="flex flex-col p-6">
+        <span className="font-medium text-2xl mb-2">
+          {context.productToShow.price}
+        </span>
+        <span className="font-medium text-md">
+          {context.productToShow.title}
+        </span>
+        <span className="font-light text-sm">
+          {context.productToShow.description}
+        </span>
+      </p>
     </aside>
   );
 };

src/Context/Context.jsx

@@ -4,12 +4,16 @@ import { createContext, useState } from "react";
 export const ShoppingCartContext = createContext();
 
 export const ShoppingCartProvider = ({ children }) => {
+  //Shopping cart - Increment quantity
   const [count, setCount] = useState(0);
-  const [isProductDetailsOpen, setIsProductDetailsOpen] = useState(false);
 
+  //Product detail: Open/close
+  const [isProductDetailsOpen, setIsProductDetailsOpen] = useState(false);
   const openProductDetails = () => setIsProductDetailsOpen(true);
   const closeProductDetails = () => setIsProductDetailsOpen(false);
 
+  //Product detail: show product details
+  const [productToShow, setProductToShow] = useState({});
   return (
     <ShoppingCartContext.Provider
       value={{
@@ -18,6 +22,8 @@ export const ShoppingCartProvider = ({ children }) => {
         openProductDetails,
         closeProductDetails,
         isProductDetailsOpen,
+        productToShow,
+        setProductToShow,
       }}
     >
       {children}