mirror of
http://88.130.71.182:3000/BlitTech/badoHair_fe.git
synced 2026-06-13 08:47:35 +00:00
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { createContext, useContext, useState, ReactNode } from "react";
|
|
import { Product } from "@/data/products";
|
|
|
|
export interface CartItem {
|
|
product: Product;
|
|
quantity: number;
|
|
selectedColor: string;
|
|
selectedLength: string;
|
|
}
|
|
|
|
interface CartContextType {
|
|
items: CartItem[];
|
|
addItem: (product: Product, color: string, length: string) => void;
|
|
removeItem: (productId: string) => void;
|
|
updateQuantity: (productId: string, quantity: number) => void;
|
|
clearCart: () => void;
|
|
totalItems: number;
|
|
totalPrice: number;
|
|
isCartOpen: boolean;
|
|
setIsCartOpen: (open: boolean) => void;
|
|
}
|
|
|
|
const CartContext = createContext<CartContextType | undefined>(undefined);
|
|
|
|
export const CartProvider = ({ children }: { children: ReactNode }) => {
|
|
const [items, setItems] = useState<CartItem[]>([]);
|
|
const [isCartOpen, setIsCartOpen] = useState(false);
|
|
|
|
const addItem = (product: Product, color: string, length: string) => {
|
|
setItems((prev) => {
|
|
const existing = prev.find((i) => i.product.id === product.id && i.selectedColor === color && i.selectedLength === length);
|
|
if (existing) {
|
|
return prev.map((i) =>
|
|
i.product.id === product.id && i.selectedColor === color && i.selectedLength === length
|
|
? { ...i, quantity: i.quantity + 1 }
|
|
: i
|
|
);
|
|
}
|
|
return [...prev, { product, quantity: 1, selectedColor: color, selectedLength: length }];
|
|
});
|
|
setIsCartOpen(true);
|
|
};
|
|
|
|
const removeItem = (productId: string) => {
|
|
setItems((prev) => prev.filter((i) => i.product.id !== productId));
|
|
};
|
|
|
|
const updateQuantity = (productId: string, quantity: number) => {
|
|
if (quantity <= 0) {
|
|
removeItem(productId);
|
|
return;
|
|
}
|
|
setItems((prev) => prev.map((i) => (i.product.id === productId ? { ...i, quantity } : i)));
|
|
};
|
|
|
|
const clearCart = () => setItems([]);
|
|
|
|
const totalItems = items.reduce((sum, i) => sum + i.quantity, 0);
|
|
const totalPrice = items.reduce((sum, i) => sum + i.product.price * i.quantity, 0);
|
|
|
|
return (
|
|
<CartContext.Provider value={{ items, addItem, removeItem, updateQuantity, clearCart, totalItems, totalPrice, isCartOpen, setIsCartOpen }}>
|
|
{children}
|
|
</CartContext.Provider>
|
|
);
|
|
};
|
|
|
|
export const useCart = () => {
|
|
const context = useContext(CartContext);
|
|
if (!context) throw new Error("useCart must be used within CartProvider");
|
|
return context;
|
|
};
|