first commit

2025-02-12 23:25:43 -05:00
commit d8c7ec4866
1400 changed files with 90826 additions and 0 deletions
@@ -0,0 +1,107 @@
+
+'use client'
+
+
+import React from "react";
+import Image from "next/image";
+import { useContextElement } from "@/context/Context";
+import Link from "next/link";
+const CartProduct = () => {
+
+  const {cartProducts,
+    setCartProducts} = useContextElement() 
+  const handleIncrease = (index) => {
+    const item = cartProducts[index];
+
+    item.quantity += 1;
+    const updated = [...cartProducts];
+    updated[index] = item;
+
+    setCartProducts(updated);
+  };
+  const handleDecrease = (index) => {
+    const item = cartProducts[index];
+
+    if (item.quantity > 1) {
+      item.quantity -= 1;
+      const updated = [...cartProducts];
+      updated[index] = item;
+
+      setCartProducts(updated);
+    }
+  };
+
+  const handleRemoveCart = (index) => {
+    const item = cartProducts[index];
+
+    setCartProducts((pre) => [...pre.filter((elm) => elm !== item)]);
+  };
+  return (
+    <>
+
+    {cartProducts.map((elm,i)=>
+      <tr  key={i} >
+        <td className="product-thumbnails">
+          <a href="#" className="product-img">
+            <Image width={465} height={609} style={{width:'100%',height:'fit-content'}}     src={`/images/shop/${elm.img}.png`} alt="image" />
+          </a>
+        </td>
+        <td className="product-info">
+          <Link href={`/products/${elm.id}`} className="product-name">
+            {elm.title}
+          </Link>
+          <div className="serial">#859632007881</div>
+          <ul className="style-none">
+            <li className="size">Size: 23”</li>
+            <li className="color">Color: Red</li>
+          </ul>
+        </td>
+        <td className="price">
+          <span>${elm.price.toFixed(2)}</span>
+        </td>
+        <td className="quantity">
+          <ul className="order-box style-none">
+            <li>
+              <div onClick={()=>handleDecrease(i)} className="btn value-decrease">-</div>
+            </li>
+            <li>
+              <input
+                type="number"
+                min="1"
+                max="22"
+                
+                value={elm.quantity}
+                disabled
+                className="product-value val"
+              />
+            </li>
+            <li>
+              <div onClick={()=>handleIncrease(i)} className="btn value-increase">+ </div>
+            </li>
+          </ul>
+        </td>
+        <td className="price total-price">
+          <span>${(elm.price * elm.quantity).toFixed(2)}</span>
+        </td>
+        <td>
+          <a href="#" onClick={()=>handleRemoveCart(i)} className="remove-product">
+            x
+          </a>
+        </td>
+      </tr>)}
+
+      
+      {cartProducts.length ? <>
+       </> :   <button  className="theme-btn-seven update-cart-button hoverPurple" style={{margin:'20px auto'}} >
+        <Link style={{color:'inherit',margin:'0px',padding:'0px'}} href={'/e-commerce'}>
+          Continue Shoping</Link>
+        </button> }
+ 
+    
+
+     
+    </>
+  );
+};
+
+export default CartProduct;
@@ -0,0 +1,32 @@
+import React from "react";
+import Link from "next/link";
+import { useContextElement } from "@/context/Context";
+const CartTotal = () => {
+  const {totalPrice,cartProducts} = useContextElement()
+  return (
+    <>
+      <table className="cart-total-table">
+        <tbody>
+          <tr>
+            <th>Subtotal</th>
+            <td>${totalPrice.toFixed(2)}</td>
+          </tr>
+          <tr>
+            <th>Shipping Cost</th>
+            <td>${(cartProducts.length * 10).toFixed(2)}</td>
+          </tr>
+          <tr>
+            <th>Total</th>
+            <td>${((cartProducts.length * 10) + (totalPrice)).toFixed(2)}</td>
+          </tr>
+        </tbody>
+      </table>
+      {/* <!-- /.cart-total-table --> */}
+      <Link     href="/checkout" className="theme-btn-seven checkout-process mt-30">
+        Checkout
+      </Link>
+    </>
+  );
+};
+
+export default CartTotal;
@@ -0,0 +1,27 @@
+'use client'
+
+import { useContextElement } from "@/context/Context";
+import React from "react";
+
+const Coupon = () => {
+  const {cartProducts} = useContextElement()
+  return (
+    <div className="coupon-section d-flex flex-column">
+      {!cartProducts.length ? <></> :
+      <div className="coupon-form d-lg-flex align-items-center">
+        <input type="text" placeholder="Enter your code" />
+        <button className="theme-btn-seven md-mt-20 sm-mb-20">
+          Apply Coupne
+        </button>
+      </div> }
+      {/* <!-- /.coupon-form --> */}
+      <div className="mt-auto">
+        <button className="theme-btn-seven update-cart-button">
+          Update cart
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Coupon;