130 lines
7.9 KiB
TypeScript
130 lines
7.9 KiB
TypeScript
'use client';
|
|
import { Button } from 'primereact/button';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import React, { useState } from 'react';
|
|
|
|
function ShoppingCart() {
|
|
const quantityOptions = [
|
|
{ label: '1', value: 1 },
|
|
{ label: '2', value: 2 },
|
|
{ label: '3', value: 3 },
|
|
{ label: '4', value: 4 }
|
|
];
|
|
const [selectedQuantity, setselectedQuantity] = useState(1);
|
|
const [selectedQuantity2, setselectedQuantity2] = useState(1);
|
|
|
|
return (
|
|
<div className="card">
|
|
<div className="flex flex-column align-items-center mb-6">
|
|
<div className="text-900 text-4xl mb-4 font-medium">Your cart total is $82.00</div>
|
|
<p className="text-700 font-medium text-xl mt-0 mb-4">FREE SHIPPING AND RETURN</p>
|
|
<Button label="Check Out" />
|
|
</div>
|
|
<ul className="list-none p-0 m-0">
|
|
<li className="flex flex-column md:flex-row py-6 border-top-1 border-bottom-1 surface-border md:align-items-center">
|
|
<img src="/demo/images/ecommerce/shopping-cart/shopping-cart-2-1.png" className="w-12rem flex-shrink-0 mx-auto md:mx-0" alt="shopping-cart-2-1" />
|
|
<div className="flex-auto py-5 md:pl-5">
|
|
<div className="flex flex-wrap align-items-start sm:align-items-center sm:flex-row sm:justify-content-between surface-border pb-6">
|
|
<div className="w-full sm:w-6 flex flex-column">
|
|
<span className="text-900 text-xl font-medium mb-3">Product Name</span>
|
|
<span className="text-700">Medium</span>
|
|
</div>
|
|
<div className="w-full sm:w-6 flex align-items-start justify-content-between mt-3 sm:mt-0">
|
|
<div>
|
|
<Dropdown options={quantityOptions} value={selectedQuantity} onChange={(e) => setselectedQuantity(e.value)}></Dropdown>
|
|
</div>
|
|
<div className="flex flex-column sm:align-items-end">
|
|
<span className="text-900 text-xl font-medium mb-2 sm:mb-3">$20.00</span>
|
|
<a className="cursor-pointer text-pink-500 font-medium text-sm hover:text-pink-600 transition-colors transition-duration-300" tabIndex={0}>
|
|
Remove
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-column">
|
|
<span className="inline-flex align-items-center mb-3">
|
|
<i className="pi pi-envelope text-700 mr-2"></i>
|
|
<span className="text-700 mr-2">Order today.</span>
|
|
</span>
|
|
<span className="inline-flex align-items-center mb-3">
|
|
<i className="pi pi-send text-700 mr-2"></i>
|
|
<span className="text-700 mr-2">
|
|
Delivery by <span className="font-bold">Dec 23.</span>
|
|
</span>
|
|
</span>
|
|
<span className="flex align-items-center">
|
|
<i className="pi pi-exclamation-triangle text-700 mr-2"></i>
|
|
<span className="text-700">Only 8 Available.</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li className="flex flex-column md:flex-row py-6 border-top-1 border-bottom-1 surface-border md:align-items-center">
|
|
<img src="/demo/images/ecommerce/shopping-cart/shopping-cart-2-2.png" className="w-12rem flex-shrink-0 mx-auto md:mx-0" alt="shopping-cart-2-2" />
|
|
<div className="flex-auto py-5 md:pl-5">
|
|
<div className="flex flex-wrap align-items-start sm:align-items-center sm:flex-row sm:justify-content-between surface-border pb-6">
|
|
<div className="w-full sm:w-6 flex flex-column">
|
|
<span className="text-900 text-xl font-medium mb-3">Product Name</span>
|
|
<span className="text-700">Medium</span>
|
|
</div>
|
|
<div className="w-full sm:w-6 flex align-items-start justify-content-between mt-3 sm:mt-0">
|
|
<div>
|
|
<Dropdown options={quantityOptions} value={selectedQuantity2} onChange={(e) => setselectedQuantity2(e.value)}></Dropdown>
|
|
</div>
|
|
<div className="flex flex-column sm:align-items-end">
|
|
<span className="text-900 text-xl font-medium mb-2 sm:mb-3">$62.00</span>
|
|
<a className="cursor-pointer text-pink-500 font-medium text-sm hover:text-pink-600 transition-colors transition-duration-300" tabIndex={0}>
|
|
Remove
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-column">
|
|
<span className="inline-flex align-items-center mb-3">
|
|
<i className="pi pi-envelope text-700 mr-2"></i>
|
|
<span className="text-700 mr-2">Order today.</span>
|
|
</span>
|
|
<span className="inline-flex align-items-center mb-3">
|
|
<i className="pi pi-send text-700 mr-2"></i>
|
|
<span className="text-700 mr-2">
|
|
Delivery by <span className="font-bold">Dec 23.</span>
|
|
</span>
|
|
</span>
|
|
<span className="flex align-items-center">
|
|
<i className="pi pi-exclamation-triangle text-700 mr-2"></i>
|
|
<span className="text-700">Only 2 Available.</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div className="flex">
|
|
<div className="w-12rem hidden md:block"></div>
|
|
<ul className="list-none py-0 pr-0 pl-0 md:pl-5 mt-6 mx-0 mb-0 flex-auto">
|
|
<li className="flex justify-content-between mb-4">
|
|
<span className="text-xl text-900 font-semibold">Subtotal</span>
|
|
<span className="text-xl text-900">$82.00</span>
|
|
</li>
|
|
<li className="flex justify-content-between mb-4">
|
|
<span className="text-xl text-900 font-semibold">Shipping</span>
|
|
<span className="text-xl text-900">Free</span>
|
|
</li>
|
|
<li className="flex justify-content-between mb-4">
|
|
<span className="text-xl text-900 font-semibold">VAT</span>
|
|
<span className="text-xl text-900">$8.00</span>
|
|
</li>
|
|
<li className="flex justify-content-between border-top-1 surface-border mb-4 pt-4">
|
|
<span className="text-xl text-900 font-bold text-3xl">Total</span>
|
|
<span className="text-xl text-900 font-bold text-3xl">$90.00</span>
|
|
</li>
|
|
<li className="flex justify-content-end">
|
|
<Button label="Check Out"></Button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ShoppingCart;
|