From 7753dee0e0f3b7ddb5f760cfe5fc3a2440b43b16 Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 19:24:02 -0300
Subject: [PATCH 01/10] fix: solving problem where fetch products cause
 infinite request to backend

---
 package-lock.json               | 1 +
 src/Components/ProductTable.jsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index d01ddfa..bbd664e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "react-ecommerce",
       "version": "0.0.1",
       "dependencies": {
         "@headlessui/react": "^1.6.0",
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index ea76621..4bcff02 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -41,7 +41,7 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(body);
     };
     fetchProducts();
-  });
+  }, []);
 
   return (
     <div className="bg-white">

From ea4869ed7325a36591e3618085b0a48c5c438cd3 Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 19:55:09 -0300
Subject: [PATCH 02/10] fix: implementing sort by price and release date

---
 src/Components/ProductFilters.jsx | 5 ++++-
 src/Components/ProductTable.jsx   | 6 ++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 0f3262a..2e6ded4 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -109,7 +109,10 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       {({ active }) => (
                         <button
                           onClick={() => {
-                            // TODO
+                            const newSortOptions = sortOptions.map(
+                              (sortOption) => sortOption.name === option.name ? { ...sortOption, current: true } : { ...sortOption, current: false }
+                            )
+                            setSortOptions(newSortOptions)
                           }}
                           className={classNames(
                             option.current ? "font-medium text-gray-900" : "text-gray-500",
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index 4bcff02..413ecbe 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -36,12 +36,14 @@ export default function ProductTable({ cart, updateCart }) {
   useEffect(() => {
     let fetchProducts = async () => {
       console.info("Fetching Products...");
-      let res = await fetch("http://localhost:3001/products");
+      const activeSortOption = sortOptions.find((option) => option.current);
+
+      let res = await fetch(`http://localhost:3001/products?${activeSortOption? `_sort=${activeSortOption.name.toLowerCase()}` : ``}`);
       let body = await res.json();
       setProducts(body);
     };
     fetchProducts();
-  }, []);
+  }, [sortOptions]);
 
   return (
     <div className="bg-white">

From 88d3032f8957df7373bad5b82a0cab1825a8932f Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 21:30:23 -0300
Subject: [PATCH 03/10] feat: implementing filter by price range

---
 src/Components/ProductFilters.jsx | 12 +++++-
 src/Components/ProductTable.jsx   | 63 +++++++++++++++++++------------
 2 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 2e6ded4..29b5608 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -48,7 +48,17 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                       defaultValue={option.minValue}
                       type="checkbox"
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
-                      defaultChecked={option.checked}
+                      checked={option.checked}
+                      onChange={(e) => {
+                        const newPriceFilterOption = filterOptions.price.map(filterOption => {
+                          if (filterOption.label === option.label) {
+                            return { ...filterOption, checked: e.target.checked }
+                          } else {
+                            return { ...filterOption, checked: false }
+                          }
+                        })
+                        setFilterOptions({ ...filterOptions, price: newPriceFilterOption })
+                      }}
                     />
                     <label htmlFor={`price-${optionIdx}`} className="ml-3 min-w-0 flex-1 text-gray-600">
                       {option.label}
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index 413ecbe..f46d9ae 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import ProductFilters from "./ProductFilters";
+import React, { useEffect, useState } from "react"
+import ProductFilters from "./ProductFilters"
 
 const getDefaultFilterOptions = () => {
   return {
@@ -17,33 +17,48 @@ const getDefaultFilterOptions = () => {
       { value: "gray", label: "Gray", checked: false },
       { value: "teal", label: "Teal", checked: false },
     ],
-  };
-};
+  }
+}
 
 const getDefaultSortOptions = () => {
   return [
     { name: "Price", current: false },
     { name: "Newest", current: false },
-  ];
-};
+  ]
+}
 
 export default function ProductTable({ cart, updateCart }) {
-  let [products, setProducts] = useState([]);
+  let [products, setProducts] = useState([])
+
+  const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions())
+  const [sortOptions, setSortOptions] = useState(getDefaultSortOptions())
+  const activeSortOption = sortOptions.find((option) => option.current)
+  const activePriceFilterOption = filterOptions.price.find((option) => option.checked)
 
-  const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
-  const [sortOptions, setSortOptions] = useState(getDefaultSortOptions());
+  const buildPriceQuery = () => {
+    let priceQuery = activeSortOption? '&': ''
+    if (activePriceFilterOption) {
+      priceQuery = `price_gte=${activePriceFilterOption.minValue}`
+    }
+    if (activePriceFilterOption && !activePriceFilterOption.label.endsWith('+')) {
+      priceQuery += `&price_lte=${activePriceFilterOption.maxValue}`
+    }
+    return priceQuery
+  }
 
   useEffect(() => {
     let fetchProducts = async () => {
-      console.info("Fetching Products...");
-      const activeSortOption = sortOptions.find((option) => option.current);
+      console.info("Fetching Products...")
+      const sortQuery = activeSortOption ? `&_sort=${activeSortOption.name.toLowerCase()}` : ``
+      const priceQuery = buildPriceQuery()
 
-      let res = await fetch(`http://localhost:3001/products?${activeSortOption? `_sort=${activeSortOption.name.toLowerCase()}` : ``}`);
-      let body = await res.json();
-      setProducts(body);
-    };
-    fetchProducts();
-  }, [sortOptions]);
+      let res = await fetch(`http://localhost:3001/products?${sortQuery}${priceQuery}`)
+      let body = await res.json()
+      console.log(priceQuery)
+      setProducts(body)
+    }
+    fetchProducts()
+  }, [sortOptions, filterOptions])
 
   return (
     <div className="bg-white">
@@ -64,20 +79,20 @@ export default function ProductTable({ cart, updateCart }) {
                   type="button"
                   className="hidden group-hover:block group-hover:opacity-50 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-black"
                   onClick={() => {
-                    let newCart = cart.slice();
+                    let newCart = cart.slice()
 
                     if (!newCart.includes(product)) {
-                      product.quantity = 1;
-                      newCart.push(product);
+                      product.quantity = 1
+                      newCart.push(product)
                     } else {
                       newCart.map((p) => {
                         if (p.id === product.id) {
-                          p.quantity += 1;
+                          p.quantity += 1
                         }
-                      });
+                      })
                     }
 
-                    updateCart(newCart);
+                    updateCart(newCart)
                   }}
                 >
                   Add To Cart
@@ -90,5 +105,5 @@ export default function ProductTable({ cart, updateCart }) {
         </div>
       </div>
     </div>
-  );
+  )
 }

From 64036991721b4f049f543a1f32f94b09f64c6931 Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 21:40:54 -0300
Subject: [PATCH 04/10] feat: implementing filter by color

---
 src/Components/ProductFilters.jsx | 13 ++++++++++++-
 src/Components/ProductTable.jsx   | 12 ++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 29b5608..589b8ac 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -75,7 +75,18 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                     <input
                       id={`color-${optionIdx}`}
                       name="color[]"
-                      defaultValue={option.value}
+                      checked={option.checked}
+                      onChange={(e) => {
+                        const newColorFilterOption = filterOptions.color.map(filterOption => {
+                          if (filterOption.label === option.label) {
+                            return { ...filterOption, checked: e.target.checked }
+                          } else {
+                            return { ...filterOption, checked: false }
+                          }
+                        })
+                        console.log(newColorFilterOption)
+                        setFilterOptions({ ...filterOptions, color: newColorFilterOption })
+                      }}
                       type="checkbox"
                       className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black"
                       defaultChecked={option.checked}
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index f46d9ae..3e09f1d 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -34,9 +34,10 @@ export default function ProductTable({ cart, updateCart }) {
   const [sortOptions, setSortOptions] = useState(getDefaultSortOptions())
   const activeSortOption = sortOptions.find((option) => option.current)
   const activePriceFilterOption = filterOptions.price.find((option) => option.checked)
+  const activeColorFilterOptions = filterOptions.color.find((option) => option.checked)
 
   const buildPriceQuery = () => {
-    let priceQuery = activeSortOption? '&': ''
+    let priceQuery = activeSortOption ? '&' : ''
     if (activePriceFilterOption) {
       priceQuery = `price_gte=${activePriceFilterOption.minValue}`
     }
@@ -46,13 +47,20 @@ export default function ProductTable({ cart, updateCart }) {
     return priceQuery
   }
 
+  const buildColorQuery = () => {
+    let colorQuery = (activeSortOption || activePriceFilterOption) ? '&' : ''
+    colorQuery += `color=${activeColorFilterOptions.value}`
+    return colorQuery
+  }
+
   useEffect(() => {
     let fetchProducts = async () => {
       console.info("Fetching Products...")
       const sortQuery = activeSortOption ? `&_sort=${activeSortOption.name.toLowerCase()}` : ``
       const priceQuery = buildPriceQuery()
+      const colorQuery = buildColorQuery()
 
-      let res = await fetch(`http://localhost:3001/products?${sortQuery}${priceQuery}`)
+      let res = await fetch(`http://localhost:3001/products?${sortQuery}${priceQuery}${colorQuery}`)
       let body = await res.json()
       console.log(priceQuery)
       setProducts(body)

From ab924a82fc26e86fe6182612985de58f177de811 Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 22:27:38 -0300
Subject: [PATCH 05/10] fix: fixing error where when have not color filter
 cannot fetch data

---
 src/Components/ProductTable.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
index 3e09f1d..134a4d7 100644
--- a/src/Components/ProductTable.jsx
+++ b/src/Components/ProductTable.jsx
@@ -49,7 +49,9 @@ export default function ProductTable({ cart, updateCart }) {
 
   const buildColorQuery = () => {
     let colorQuery = (activeSortOption || activePriceFilterOption) ? '&' : ''
-    colorQuery += `color=${activeColorFilterOptions.value}`
+    if (activeColorFilterOptions) {
+      colorQuery += `color=${activeColorFilterOptions.value}`
+    }
     return colorQuery
   }
 

From 52d34b87f058d9f3a70273e321cefdb788907db4 Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 22:30:08 -0300
Subject: [PATCH 06/10] feat: implementing clear all fiters and add filters
 counter

---
 src/Components/ProductFilters.jsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx
index 589b8ac..bde3dfb 100644
--- a/src/Components/ProductFilters.jsx
+++ b/src/Components/ProductFilters.jsx
@@ -7,6 +7,9 @@ function classNames(...classes) {
 }
 
 export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) {
+  const activePriceFilterOption = filterOptions.price.find((option) => option.checked)
+  const activeColorFilterOptions = filterOptions.color.find((option) => option.checked)
+
   return (
     <Disclosure
       as="section"
@@ -24,11 +27,18 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp
                 className="flex-none w-5 h-5 mr-2 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
-              0 Filters
+              {!!activePriceFilterOption + !!activeColorFilterOptions } Filters
             </Disclosure.Button>
           </div>
           <div className="pl-6">
-            <button type="button" className="text-gray-500">
+            <button type="button" className="text-gray-500"
+              onClick={() => {
+                const newPriceFilterOptions = filterOptions.price.map(filterOption => ({ ...filterOption, checked: false }))
+                const newColorFilterOptions = filterOptions.color.map(filterOption => ({ ...filterOption, checked: false }))
+
+                setFilterOptions({ ...filterOptions, price: newPriceFilterOptions, color: newColorFilterOptions })
+              }}
+            >
               Clear all
             </button>
           </div>

From 0b1ddc57c06d5a29fa3dd4cac47b97afa250febd Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 22:35:07 -0300
Subject: [PATCH 07/10] feat: implementing cart persistence on refresh

---
 src/Pages/Home.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..a945750 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -1,11 +1,19 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Cart from "../Components/Cart";
 import NavBar from "../Components/NavBar";
 import ProductTable from "../Components/ProductTable";
 
 function Home() {
   const [open, setOpen] = useState(false);
-  const [cart, updateCart] = useState([]);
+  const [cart, updateCart] = useState(() => {
+    const cart = localStorage.getItem("cart");
+    return cart ? JSON.parse(cart) : [];
+  });
+
+  useEffect(() => {
+    const cartJSON = JSON.stringify(cart);
+    localStorage.setItem("cart", cartJSON);
+  }, [cart])
 
   return (
     <main>

From cba10ea6a31b43e5244ad41f4d6c4f0854c0163e Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 23:00:45 -0300
Subject: [PATCH 08/10] feat: implementing cart fuctionalities

---
 src/Components/Cart.jsx | 102 ++++++++++++++++++++++------------------
 1 file changed, 56 insertions(+), 46 deletions(-)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 917b7a1..61ea6aa 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -1,15 +1,17 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
-import React, { Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react"
+import { XIcon } from "@heroicons/react/outline"
+import React, { Fragment } from "react"
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
+  console.log(cart)
+  let subtotal = cart.reduce((acc, product) => (acc + product.price*product.quantity), 0)
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
         className="fixed inset-0 overflow-hidden z-10"
         onClose={() => {
-          setOpen;
+          setOpen
         }}
       >
         <div className="absolute inset-0 overflow-hidden">
@@ -53,59 +55,67 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                     </div>
 
                     <div className="mt-8">
-                      <div className="flow-root">
-                        <ul role="list" className="-my-6 divide-y divide-gray-200">
-                          {cart.map((product) => (
-                            <li key={product.id} className="flex py-6">
-                              <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
-                                <img
-                                  src={product.imageSrc}
-                                  alt={product.imageAlt}
-                                  className="h-full w-full object-cover object-center"
-                                />
-                              </div>
+                      {cart.length > 0 ? (
 
-                              <div className="ml-4 flex flex-1 flex-col">
-                                <div>
-                                  <div className="flex justify-between text-base font-medium text-gray-900">
-                                    <h3>{product.name}</h3>
-                                    <p className="ml-4">${product.price}</p>
-                                  </div>
+                        <div className="flow-root">
+                          <ul role="list" className="-my-6 divide-y divide-gray-200">
+                            {cart.map((product) => (
+                              <li key={product.id} className="flex py-6">
+                                <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
+                                  <img
+                                    src={product.imageSrc}
+                                    alt={product.imageAlt}
+                                    className="h-full w-full object-cover object-center"
+                                  />
                                 </div>
-                                <div className="flex flex-1 items-end justify-between text-sm">
-                                  <p className="text-gray-500">Qty {product.quantity}</p>
 
-                                  <div className="flex">
-                                    <button
-                                      onClick={() => {
-                                        let newCart = cart.filter((p) => {
-                                          if (p.id === product.id) {
-                                            p.quantity -= 1;
-                                          }
+                                <div className="ml-4 flex flex-1 flex-col">
+                                  <div>
+                                    <div className="flex justify-between text-base font-medium text-gray-900">
+                                      <h3>{product.name}</h3>
+                                      <p className="ml-4">${product.price}</p>
+                                    </div>
+                                  </div>
+                                  <div className="flex flex-1 items-end justify-between text-sm">
+                                    <p className="text-gray-500">Qty {product.quantity}</p>
+
+                                    <div className="flex">
+                                      <button
+                                        onClick={() => {
+                                          let newCart = cart.filter((p) => {
+                                            if (p.id === product.id) {
+                                              p.quantity -= 1
+                                            }
 
-                                          return p.quantity > 0;
-                                        });
-                                        updateCart(newCart);
-                                      }}
-                                      type="button"
-                                      className="font-medium text-gray-500 hover:text-black"
-                                    >
-                                      Remove
-                                    </button>
+                                            return p.quantity > 0
+                                          })
+                                          updateCart(newCart)
+                                        }}
+                                        type="button"
+                                        className="font-medium text-gray-500 hover:text-black"
+                                      >
+                                        Remove
+                                      </button>
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      ) : (
+                        <div className="text-gray-500">
+                          Empty cart
+                        </div>
+                      )
+                      }
                     </div>
                   </div>
 
                   <div className="border-t border-gray-200 py-6 px-4 sm:px-6">
                     <div className="flex justify-between text-base font-medium text-gray-900">
                       <p>Subtotal</p>
-                      <p>$262.00</p>
+                      <p>${subtotal}</p>
                     </div>
                     <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                     <div className="mt-6">
@@ -136,5 +146,5 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
         </div>
       </Dialog>
     </Transition.Root>
-  );
+  )
 }

From 507c0316aecbe45dc9422214b4533478e1d5544b Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 23:06:39 -0300
Subject: [PATCH 09/10] fix: displaying cart size on navbar

---
 src/Components/Cart.jsx   | 1 -
 src/Components/NavBar.jsx | 4 ++--
 src/Pages/Home.jsx        | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 61ea6aa..935d98a 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -3,7 +3,6 @@ import { XIcon } from "@heroicons/react/outline"
 import React, { Fragment } from "react"
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
-  console.log(cart)
   let subtotal = cart.reduce((acc, product) => (acc + product.price*product.quantity), 0)
   return (
     <Transition.Root show={open} as={Fragment}>
diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
index b1d0db9..37aebc0 100644
--- a/src/Components/NavBar.jsx
+++ b/src/Components/NavBar.jsx
@@ -1,7 +1,7 @@
 import { ShoppingBagIcon } from "@heroicons/react/outline";
 import React from "react";
 
-export default function NavBar({ setOpen }) {
+export default function NavBar({ setOpen, items }) {
   return (
     <div className="bg-white">
       <header className="relative">
@@ -41,7 +41,7 @@ export default function NavBar({ setOpen }) {
                             className="flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500"
                             aria-hidden="true"
                           />
-                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
+                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{items}</span>
                           <span className="sr-only">items in cart, view bag</span>
                         </button>
                       </div>
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index a945750..68a2f55 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -9,7 +9,7 @@ function Home() {
     const cart = localStorage.getItem("cart");
     return cart ? JSON.parse(cart) : [];
   });
-
+  const items = cart.reduce((acc, product) => (acc + product.quantity), 0)
   useEffect(() => {
     const cartJSON = JSON.stringify(cart);
     localStorage.setItem("cart", cartJSON);
@@ -17,7 +17,7 @@ function Home() {
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, items }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>

From 9416b7a7d2a877ca27a0e8f2a3f612284c9bbfdd Mon Sep 17 00:00:00 2001
From: kefflen <kefflenjava@hotmail.com>
Date: Sat, 20 Jan 2024 23:09:21 -0300
Subject: [PATCH 10/10] fix: close cart when user click gray region

---
 src/Components/Cart.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
index 935d98a..b7f4fbd 100644
--- a/src/Components/Cart.jsx
+++ b/src/Components/Cart.jsx
@@ -22,6 +22,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
             leave="ease-in-out duration-500"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
+            onClick={() => setOpen(false)}
           >
             <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
           </Transition.Child>