Issue 13: Navbar dinámica

package.json

@@ -9,8 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.16",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",

src/Components/Card/index.jsx

@@ -0,0 +1,59 @@
+import { useContext } from 'react'
+import { PlusIcon, CheckIcon } from '@heroicons/react/24/solid'
+import { ShoppingCartContext } from '../../Context'
+
+const Card = (data) => {
+  const context = useContext(ShoppingCartContext)
+
+  const showProduct = (productDetail) => {
+    context.openProductDetail()
+    context.setProductToShow(productDetail)
+  }
+
+  const addProductsToCart = (event, productData) => {
+    event.stopPropagation()
+    context.setCount(context.count + 1)
+    context.setCartProducts([...context.cartProducts, productData])
+    context.openCheckoutSideMenu()
+    context.closeProductDetail()
+  }
+
+  const renderIcon = (id) => {
+    const isInCart = context.cartProducts.filter(product => product.id === id).length > 0
+
+    if (isInCart) {
+      return (
+        <div
+          className='absolute top-0 right-0 flex justify-center items-center bg-black w-6 h-6 rounded-full m-2 p-1'>
+          <CheckIcon className='h-6 w-6 text-white'></CheckIcon>
+        </div>
+      )
+    } else {
+      return (
+        <div
+          className='absolute top-0 right-0 flex justify-center items-center bg-white w-6 h-6 rounded-full m-2 p-1'
+          onClick={(event) => addProductsToCart(event, data.data)}>
+          <PlusIcon className='h-6 w-6 text-black'></PlusIcon>
+        </div>
+      )
+    }
+  }
+
+  return (
+    <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-xs m-2 px-3 py-0.5'>{data.data.category.name}</span>
+        <img className='w-full h-full object-cover rounded-lg' src={data.data.images[0]} alt={data.data.title} />
+        {renderIcon(data.data.id)}
+      </figure>
+      <p className='flex justify-between'>
+        <span className='text-sm font-light'>{data.data.title}</span>
+        <span className='text-lg font-medium'>${data.data.price}</span>
+      </p>
+    </div>
+  )
+}
+
+export default Card

src/Components/CheckoutSideMenu/index.jsx

@@ -0,0 +1,68 @@
+import { useContext } from 'react'
+import { Link } from 'react-router-dom'
+import { XMarkIcon } from '@heroicons/react/24/solid'
+import { ShoppingCartContext } from '../../Context'
+import OrderCard from '../../Components/OrderCard'
+import { totalPrice } from '../../utils'
+import './styles.css'
+
+const CheckoutSideMenu = () => {
+  const context = useContext(ShoppingCartContext)
+
+  const handleDelete = (id) => {
+    const filteredProducts = context.cartProducts.filter(product => product.id != id)
+    context.setCartProducts(filteredProducts)
+  }
+
+  const handleCheckout = () => {
+    const orderToAdd = {
+      date: '01.02.23',
+      products: context.cartProducts,
+      totalProducts: context.cartProducts.length,
+      totalPrice: totalPrice(context.cartProducts)
+    }
+
+    context.setOrder([...context.order, orderToAdd])
+    context.setCartProducts([])
+    context.setSearchByTitle(null)
+  }
+
+  return (
+    <aside
+      className={`${context.isCheckoutSideMenuOpen ? 'flex' : 'hidden'} checkout-side-menu flex-col fixed right-0 border border-black rounded-lg bg-white`}>
+      <div className='flex justify-between items-center p-6'>
+        <h2 className='font-medium text-xl'>My Order</h2>
+        <div>
+          <XMarkIcon
+            className='h-6 w-6 text-black cursor-pointer'
+            onClick={() => context.closeCheckoutSideMenu()}></XMarkIcon>
+        </div>
+      </div>
+      <div className='px-6 overflow-y-scroll flex-1'>
+        {
+          context.cartProducts.map(product => (
+            <OrderCard
+              key={product.id}
+              id={product.id}
+              title={product.title}
+              imageUrl={product.images}
+              price={product.price}
+              handleDelete={handleDelete}
+            />
+          ))
+        }
+      </div>
+      <div className='px-6 mb-6'>
+        <p className='flex justify-between items-center mb-2'>
+          <span className='font-light'>Total:</span>
+          <span className='font-medium text-2xl'>${totalPrice(context.cartProducts)}</span>
+        </p>
+        <Link to='/my-orders/last'>
+          <button className='bg-black py-3 text-white w-full rounded-lg' onClick={() => handleCheckout()}>Checkout</button>
+        </Link>
+      </div>
+    </aside>
+  )
+}
+
+export default CheckoutSideMenu

src/Components/CheckoutSideMenu/styles.css

@@ -0,0 +1,5 @@
+.checkout-side-menu {
+  width: 360px;
+  height: calc(100vh - 68px);
+  top: 68px;
+}

src/Components/Layout/index.jsx

@@ -0,0 +1,9 @@
+const Layout = ({ children }) => {
+  return (
+    <div className='flex flex-col items-center mt-20'>
+      {children}
+    </div>
+  )
+}
+
+export default Layout