88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ProductCart from '@/components/ecommerce/cart/ProductCart';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import React, { useState } from 'react';
|
|
|
|
export default function CartPage() {
|
|
const [cartItems, setCartItems] = useState([
|
|
{
|
|
id: "prod-1", name: "Saffron Elixir Serum", price: "$120.00", quantity: 1,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-make-up-container_23-2149030340.jpg?_wi=2", imageAlt: "Saffron Elixir Serum bottle"},
|
|
{
|
|
id: "prod-2", name: "Rose Hydrating Mist", price: "$65.00", quantity: 2,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669138.jpg?_wi=2", imageAlt: "Rose Hydrating Mist spray bottle"},
|
|
]);
|
|
|
|
const handleQuantityChange = (id: string, newQuantity: number) => {
|
|
setCartItems((prevItems) =>
|
|
prevItems.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))
|
|
);
|
|
};
|
|
|
|
const handleRemoveItem = (id: string) => {
|
|
setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
|
|
};
|
|
|
|
const calculateTotal = () => {
|
|
return cartItems
|
|
.reduce((sum, item) => sum + parseFloat(item.price.replace('$', '')) * item.quantity, 0)
|
|
.toFixed(2);
|
|
};
|
|
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Skincare", id: "#skincare" },
|
|
{ name: "IranPour Men", id: "#iranpour" },
|
|
{ name: "Wholesale", id: "#wholesale" },
|
|
{ name: "Contact", id: "#contact" },
|
|
{ name: "Cart", id: "/cart" },
|
|
{ name: "Checkout", id: "/checkout" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udbkoo"
|
|
logoAlt="IranDokht logo"
|
|
brandName="IranDokht"
|
|
bottomLeftText="Global Luxury Community"
|
|
bottomRightText="contact@irandokht.com"
|
|
/>
|
|
</div>
|
|
<div id="cart-content" data-section="cart-content" className="min-h-screen pt-24 pb-12 flex justify-center items-center">
|
|
<ProductCart
|
|
isOpen={true} // Always open on this dedicated cart page
|
|
onClose={() => {}} // No specific close action for a dedicated page
|
|
items={cartItems}
|
|
onQuantityChange={handleQuantityChange}
|
|
onRemove={handleRemoveItem}
|
|
total={`$${calculateTotal()}`}
|
|
buttons={[
|
|
{ text: "Continue Shopping", href: "/" },
|
|
{ text: "Proceed to Checkout", href: "/checkout" },
|
|
]}
|
|
title="Your Shopping Cart"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|