lionsdev/btpxpress-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dahoud
2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
app/(main)/ecommerce/checkout-form/page.tsx Normal file
View File

@@ -0,0 +1,146 @@
'use client';
import { Button } from 'primereact/button';
import { Checkbox } from 'primereact/checkbox';
import { Dropdown } from 'primereact/dropdown';
import { InputNumber } from 'primereact/inputnumber';
import { InputText } from 'primereact/inputtext';
import React, { useState } from 'react';
function CheckoutForm() {
const [value, setValue] = useState('');
const [quantities] = useState([1, 1, 1]);
const [checked, setChecked] = useState(true);
const [checked2, setChecked2] = useState(true);
const [selectedCity, setSelectedCity] = useState(null);
const [cities] = useState([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
return (
<div className="card">
<div className="grid grid-nogutter">
<div className="col-12 px-4 mt-4 md:mt-6 md:px-6">
<span className="text-900 block font-bold text-xl">Checkout</span>
</div>
<div className="col-12 lg:col-6 h-full px-4 py-4 md:px-6">
<ul className="flex list-none flex-wrap p-0 mb-6">
<li className="flex align-items-center text-primary mr-2">
Cart <i className="pi pi-chevron-right text-500 text-xs ml-2"></i>
</li>
<li className="flex align-items-center text-500 mr-2">
Information
<i className="pi pi-chevron-right text-500 text-xs ml-2"></i>
</li>
<li className="flex align-items-center text-500 mr-2">
Shipping
<i className="pi pi-chevron-right text-500 text-xs ml-2"></i>
</li>
<li className="flex align-items-center text-500 mr-2">Payment</li>
</ul>
<div className="grid formgrid">
<div className="col-12 field mb-6">
<span className="text-900 text-2xl block font-medium mb-5">Contact Information</span>
<input id="email" placeholder="Email" type="text" className="p-inputtext w-full mb-4" />
<div className="field-checkbox">
<Checkbox name="checkbox-1" onChange={(e) => setChecked(e.checked ?? false)} checked={checked} inputId="checkbox-1"></Checkbox>
<label htmlFor="checkbox-1">Email me with news and offers</label>
</div>
</div>
<div className="col-12 field mb-4">
<span className="text-900 text-2xl block font-medium mb-5">Shipping</span>
<Dropdown options={cities} value={selectedCity} onChange={(e) => setSelectedCity(e.value)} placeholder="Country / Region" optionLabel="name" showClear className="w-full"></Dropdown>
</div>
<div className="col-12 lg:col-6 field mb-4">
<input id="name" placeholder="Name" type="text" className="p-inputtext w-full" />
</div>
<div className="col-12 lg:col-6 field mb-4">
<input id="lastname" placeholder="Last Name" type="text" className="p-inputtext w-full" />
</div>
<div className="col-12 field mb-4">
<input id="address" placeholder="Address" type="text" className="p-inputtext w-full" />
</div>
<div className="col-12 field mb-4">
<input id="address2" placeholder="Apartment, suite, etc" type="text" className="p-inputtext w-full" />
</div>
<div className="col-12 lg:col-6 field mb-4">
<input id="pc" placeholder="Postal Code" type="text" className="p-inputtext w-full" />
</div>
<div className="col-12 lg:col-6 field mb-4">
<input id="city" placeholder="City" type="text" className="p-inputtext w-full" />
</div>
<div className="col-12 lg:col-6 field mb-4">
<div className="field-checkbox">
<Checkbox name="checkbox-2" onChange={(e) => setChecked2(e.checked ?? false)} checked={checked2} inputId="checkbox-2"></Checkbox>
<label htmlFor="checkbox-2">Save for next purchase</label>
</div>
</div>
<div className="col-12 flex flex-column lg:flex-row justify-content-center align-items-center lg:justify-content-end my-6">
<Button className="mt-3 lg:mt-0 w-full lg:w-auto flex-order-2 lg:flex-order-1 lg:mr-4" severity="secondary" outlined label="Return to Cart" icon="pi pi-fw pi-arrow-left"></Button>
<Button className="w-full lg:w-auto flex-order-1 lg:flex-order-2" label="Continue to Shipping" icon="pi pi-fw pi-check"></Button>
</div>
</div>
</div>
<div className="col-12 lg:col-6 px-4 py-4 md:px-6">
<div className="pb-3 surface-border">
<span className="text-900 font-medium text-xl">Your Cart</span>
</div>
<div className="flex flex-column lg:flex-row flex-wrap lg:align-items-center py-2 mt-3 surface-border">
<img src="/demo/images/ecommerce/shop/shop-1.png" className="w-8rem h-8rem flex-shrink-0 mb-3" alt="product" />
<div className="flex-auto lg:ml-3">
<div className="flex align-items-center justify-content-between mb-3">
<span className="text-900 font-bold">Product Name</span>
<span className="text-900 font-bold">$123.00</span>
</div>
<div className="text-600 text-sm mb-3">Black | Large</div>
<div className="flex flex-auto justify-content-between align-items-center">
<InputNumber
showButtons
buttonLayout="horizontal"
min={0}
inputClassName="w-2rem text-center py-2 px-1 border-transparent outline-none shadow-none"
value={quantities[0]}
className="border-1 surface-border border-round"
decrementButtonClassName="p-button-text text-600 hover:text-primary py-1 px-1"
incrementButtonClassName="p-button-text text-600 hover:text-primary py-1 px-1"
incrementButtonIcon="pi pi-plus"
decrementButtonIcon="pi pi-minus"
></InputNumber>
<Button icon="pi pi-trash" text rounded></Button>
</div>
</div>
</div>
<div className="py-2 mt-3 surface-border">
<div className="p-inputgroup mb-3">
<InputText type="text" value={value} onChange={(e) => setValue(e.target.value)} placeholder="Promo code" className="w-full" />
<Button type="button" label="Apply" disabled={!value}></Button>
</div>
</div>
<div className="py-2 mt-3">
<div className="flex justify-content-between align-items-center mb-3">
<span className="text-900 font-medium">Subtotal</span>
<span className="text-900">$123.00</span>
</div>
<div className="flex justify-content-between align-items-center mb-3">
<span className="text-900 font-medium">Shipping</span>
<span className="text-primary font-bold">Free</span>
</div>
<div className="flex justify-content-between align-items-center mb-3">
<span className="text-900 font-bold">Total</span>
<span className="text-900 font-medium text-xl">$123.00</span>
</div>
</div>
<div className="py-2 mt-3 bg-yellow-100 flex align-items-center justify-content-center border-round">
<img src="/demo/images/ecommerce/shop/flag.png" className="mr-2" alt="Country Flag" />
<span className="text-black-alpha-90 font-medium">No additional duties or taxes.</span>
</div>
</div>
</div>
</div>
);
}
export default CheckoutForm;

291
app/(main)/ecommerce/new-product/page.tsx Normal file
View File

@@ -0,0 +1,291 @@
'use client';
import { Button } from 'primereact/button';
import { Chip } from 'primereact/chip';
import { Dropdown } from 'primereact/dropdown';
import { Editor } from 'primereact/editor';
import { FileUpload, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from 'primereact/fileupload';
import { InputSwitch } from 'primereact/inputswitch';
import { InputText } from 'primereact/inputtext';
import { classNames } from 'primereact/utils';
import React, { useRef, useState } from 'react';
import type { Demo } from '@/types';
function NewProduct() {
const colorOptions = [
{ name: 'Black', background: 'bg-gray-900' },
{ name: 'Orange', background: 'bg-orange-500' },
{ name: 'Navy', background: 'bg-blue-500' }
];
const [product, setProduct] = useState<Demo.Product>({
name: '',
price: '',
code: '',
sku: '',
status: 'Draft',
tags: ['Nike', 'Sneaker'],
category: 'Sneakers',
colors: [],
stock: 'Sneakers',
inStock: true,
description: '',
images: []
});
const [selectedCategory, setSelectedCategory] = useState(product.category);
const [selectedStock, setSelectedStock] = useState(product.category);
const categoryOptions = ['Sneakers', 'Apparel', 'Socks'];
const fileUploader = useRef<FileUpload>(null);
const chipTemplate = (tag: string) => {
return (
<React.Fragment>
<span className="mr-3">{tag}</span>
<span className="chip-remove-icon flex align-items-center justify-content-center border-1 surface-border bg-gray-100 border-circle cursor-pointer" onClick={() => onChipRemove(tag)}>
<i className="pi pi-fw pi-times text-black-alpha-60"></i>
</span>
</React.Fragment>
);
};
const onImageMouseOver = (ref: React.RefObject<Button>, fileName: string) => {
if ((ref.current as any).id === fileName) (ref.current as any).style.display = 'flex';
};
const onImageMouseLeave = (ref: React.RefObject<Button>, fileName: string) => {
if ((ref.current as any).id === fileName) {
(ref.current as any).style.display = 'none';
}
};
const onChipRemove = (item: string) => {
const newTags = (product.tags as string[])?.filter((i) => i !== item);
setProduct((prevState) => ({ ...prevState, tags: newTags }));
};
const onColorSelect = (colorName: string, i: number) => {
if ((product.colors as string[])?.indexOf(colorName) !== -1) {
(product.colors as string[]).splice((product.colors as string[]).indexOf(colorName), 1);
setProduct((prevState) => ({
...prevState,
colors: (prevState.colors as string[]).filter((color) => color !== colorName)
}));
} else {
setProduct((prevState) => ({
...prevState,
colors: [...(prevState.colors as string[]), colorName]
}));
}
};
const onUpload = (event: FileUploadUploadEvent | FileUploadSelectEvent) => {
setProduct((prevState) => ({ ...prevState, images: event.files }));
};
const onFileUploadClick = () => {
const inputEl = fileUploader.current?.getInput();
inputEl?.click();
};
const emptyTemplate = () => {
return (
<div className="h-15rem overflow-y-auto py-3 border-round" style={{ cursor: 'copy' }}>
<div className="flex flex-column w-full h-full justify-content-center align-items-center" onClick={onFileUploadClick}>
<i className="pi pi-file text-4xl text-primary"></i>
<span className="block font-semibold text-900 text-lg mt-3">Drop or select images</span>
</div>
</div>
);
};
const itemTemplate = (file: object, props: ItemTemplateOptions) => {
const item = file as Demo.Base;
const buttonEl = React.createRef<Button>();
return (
<div className="flex h-15rem overflow-y-auto py-3 border-round" style={{ cursor: 'copy' }} onClick={onFileUploadClick}>
<div className="flex flex-row flex-wrap gap-3 border-round">
<div
className="h-full relative w-7rem h-7rem border-3 border-transparent border-round hover:bg-primary transition-duration-100 cursor-auto"
onMouseEnter={() => onImageMouseOver(buttonEl, item.name)}
onMouseLeave={() => onImageMouseLeave(buttonEl, item.name)}
style={{ padding: '1px' }}
>
<img src={item.objectURL} className="w-full h-full border-round shadow-2" alt={item.name} />
<Button
ref={buttonEl}
id={item.name}
type="button"
icon="pi pi-times"
className="hover:flex text-sm absolute justify-content-center align-items-center cursor-pointer w-2rem h-2rem"
rounded
style={{ top: '-10px', right: '-10px', display: 'none' }}
onClick={(event) => {
event.stopPropagation();
props.onRemove(event);
}}
></Button>
</div>
</div>
</div>
);
};
return (
<div className="card">
<span className="block text-900 font-bold text-xl mb-4">Create Product</span>
<div className="grid grid-nogutter flex-wrap gap-3 p-fluid">
<div className="col-12 lg:col-8">
<div className="grid formgrid">
<div className="col-12 field">
<InputText
type="text"
value={product.name}
onChange={(e) =>
setProduct((prevState) => ({
...prevState,
name: e.target.value
}))
}
placeholder="Product Name"
/>
</div>
<div className="col-12 lg:col-4 field">
<InputText
type="text"
placeholder="Price"
value={product.price?.toString()}
onChange={(e) =>
setProduct((prevState) => ({
...prevState,
price: parseFloat(e.target.value) || undefined
}))
}
/>
</div>
<div className="col-12 lg:col-4 field">
<InputText
type="text"
placeholder="Product Code"
value={product.code}
onChange={(e) =>
setProduct((prevState) => ({
...prevState,
code: e.target.value
}))
}
/>
</div>
<div className="col-12 lg:col-4 field">
<InputText
type="text"
placeholder="Product SKU"
value={product.sku as string}
onChange={(e) =>
setProduct((prevState) => ({
...prevState,
sku: e.target.value
}))
}
/>
</div>
<div className="col-12 field">
<Editor value={product.description} style={{ height: '250px' }}></Editor>
</div>
<div className="col-12 field">
<FileUpload
ref={fileUploader}
name="demo[]"
url="./upload.php"
itemTemplate={itemTemplate}
emptyTemplate={emptyTemplate}
onUpload={onUpload}
customUpload={true}
multiple
onSelect={onUpload}
accept="image/*"
auto
className={'upload-button-hidden border-1 surface-border surface-card border-round'}
/>
</div>
</div>
</div>
<div className="flex-1 w-full lg:w-3 xl:w-4 flex flex-column row-gap-3">
<div className="border-1 surface-border border-round">
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Publish</span>
<div className="p-3">
<div className="bg-gray-100 py-2 px-3 flex align-items-center border-round">
<span className="text-black-alpha-90 font-bold mr-3">Status:</span>
<span className="text-black-alpha-60 font-semibold">{product.status as string}</span>
<Button type="button" icon="pi pi-fw pi-pencil" className="text-black-alpha-60 ml-auto" text rounded></Button>
</div>
</div>
</div>
<div className="border-1 surface-border border-round">
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Tags</span>
<div className="p-3 flex flex-wrap gap-1">
{(product.tags as string[])?.map((tag, i) => {
return <Chip key={i} className="mr-2 py-2 px-3 text-900 font-bold surface-card border-1 surface-border" style={{ borderRadius: '20px' }} template={() => chipTemplate(tag)} />;
})}
</div>
</div>
<div className="border-1 surface-border border-round">
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Category</span>
<div className="p-3">
<Dropdown options={categoryOptions} value={selectedCategory} onChange={(e) => setSelectedCategory(e.value)} placeholder="Select a category"></Dropdown>
</div>
</div>
<div className="border-1 surface-border border-round">
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Colors</span>
<div className="p-3 flex">
{colorOptions.map((color, i) => {
return (
<div
key={i}
className={classNames('w-2rem h-2rem mr-2 border-1 surface-border border-circle cursor-pointer flex justify-content-center align-items-center', color.background)}
onClick={() => {
onColorSelect(color.name, i);
}}
>
{(product.colors as string[]).includes(color.name) ? <i key={i} className="pi pi-check text-sm text-white z-5"></i> : null}
</div>
);
})}
</div>
</div>
<div className="border-1 surface-border border-round">
<span className="text-900 font-bold block border-bottom-1 surface-border p-3">Stock</span>
<div className="p-3">
<Dropdown options={categoryOptions} value={selectedStock} onChange={(e) => setSelectedStock(e.value)} placeholder="Select stock"></Dropdown>
</div>
</div>
<div className="border-1 surface-border flex justify-content-between align-items-center py-2 px-3 border-round">
<span className="text-900 font-bold p-3">In stock</span>
<InputSwitch
checked={product.inStock as boolean}
onChange={(e) =>
setProduct((prevState) => ({
...prevState,
inStock: e.value as boolean
}))
}
></InputSwitch>
</div>
<div className="flex flex-column sm:flex-row justify-content-between align-items-center gap-3 py-2">
<Button className="flex-1 " security="danger" outlined label="Discard" icon="pi pi-fw pi-trash"></Button>
<Button className="flex-1 border-round" label="Save" icon="pi pi-fw pi-check"></Button>
</div>
</div>
</div>
</div>
);
}
export default NewProduct;

166
app/(main)/ecommerce/order-history/page.tsx Normal file
View File

@@ -0,0 +1,166 @@
'use client';
import { Divider } from 'primereact/divider';
import { Ripple } from 'primereact/ripple';
import React from 'react';
function OrderHistory() {
const orders = [
{
orderNumber: '45123',
orderDate: '7 February 2023',
amount: '$123.00',
products: [
{
name: 'Product Name Placeholder A Little Bit Long One',
color: 'White',
size: 'Small',
price: '$50',
deliveryDate: 'Delivered on 7 February 2023',
image: '/demo/images/ecommerce/order-history/orderhistory-1.png'
},
{
name: 'Product Name Placeholder A Little Bit Long One',
color: 'White',
size: 'Small',
price: '$50',
deliveryDate: 'Delivered on 7 February 2023',
image: '/demo/images/ecommerce/order-history/orderhistory-2.png'
},
{
name: 'Product Name Placeholder A Little Bit Long One',
color: 'White',
size: 'Small',
price: '$63',
deliveryDate: 'Delivered on 7 February 2023',
image: '/demo/images/ecommerce/order-history/orderhistory-3.png'
}
]
},
{
orderNumber: '45126',
orderDate: '9 February 2023',
amount: '$250.00',
products: [
{
name: 'Product Name Placeholder A Little Bit Long One',
color: 'White',
size: 'Small',
price: '$80',
deliveryDate: 'Delivered on 9 February 2023',
image: '/demo/images/ecommerce/order-history/orderhistory-4.png'
},
{
name: 'Product Name Placeholder A Little Bit Long One',
color: 'White',
size: 'Small',
price: '$20',
deliveryDate: 'Delivered on 9 February 2023',
image: '/demo/images/ecommerce/order-history/orderhistory-5.png'
},
{
name: 'Product Name Placeholder A Little Bit Long One',
color: 'White',
size: 'Small',
price: '$150',
deliveryDate: 'Delivered on 9 February 2023',
image: '/demo/images/ecommerce/order-history/orderhistory-6.png'
}
]
}
];
return (
<div className="card">
<div className="flex flex-column md:flex-row justify-content-between align-items-center mb-4">
<div className="flex flex-column text-center md:text-left">
<span className="text-900 text-3xl mb-2">My Orders</span>
<span className="text-600 text-xl">Dignissim diam quis enim lobortis.</span>
</div>
<span className="p-input-icon-right mt-5 mb-2 md:mt-0 md:mb-0 w-full lg:w-25rem">
<i className="pi pi-search text-gray-400"></i>
<input type="text" className="p-inputtext w-full lg:w-25rem surface-50" placeholder="Search" />
</span>
</div>
{orders.map((order, i) => {
return (
<div key={i} className="surface-card grid grid-nogutter border-round shadow-2 mb-6">
<div className="col-12 flex p-2 surface-100 border-round-top">
<div className="p-2 flex-auto text-center md:text-left">
<span className="text-700 block">Order Number</span>
<span className="text-900 font-medium block mt-2">{order.orderNumber}</span>
</div>
<Divider align="center" layout="vertical" className="h-full mx-0 lg:mx-3 surface-border"></Divider>
<div className="p-2 flex-auto text-center md:text-left">
<span className="text-700 block">Order Date</span>
<span className="text-900 font-medium block mt-2">{order.orderDate}</span>
</div>
<Divider align="center" layout="vertical" className="h-full mx-0 lg:mx-3 surface-border"></Divider>
<div className="p-2 flex-auto text-center md:text-left">
<span className="text-700 block">Total Amount</span>
<span className="text-900 font-medium block mt-2">{order.amount}</span>
</div>
</div>
<div className="col-12">
{order.products.map((product, i) => {
return (
<div key={i} className="p-2 my-4 flex flex-column lg:flex-row justify-content-between align-items-center">
<div className="flex flex-column lg:flex-row justify-content-center align-items-center px-2">
<img src={product.image} alt="product" className="w-8rem h-8rem mr-3 flex-shrink-0" />
<div className="flex flex-column my-auto text-center md:text-left">
<span className="text-900 font-medium mb-3 mt-3 lg:mt-0">{product.name}</span>
<span className="text-700 text-sm mb-3">
{product.color} | {product.size}
</span>
<a tabIndex={0} className="p-ripple p-2 select-none cursor-pointer w-10rem mx-auto lg:mx-0 border-round font-medium text-center border-1 border-primary text-primary transition-duration-150">
Buy Again <span className="font-light">| {product.price}</span>
<Ripple />
</a>
</div>
</div>
<div
className="mr-0 lg:mr-3 mt-4 lg:mt-0 p-2 flex align-items-center"
style={{
borderRadius: '2.5rem',
backgroundColor: 'rgba(76, 175, 80,.1)'
}}
>
<span className="bg-green-500 text-white flex align-items-center justify-content-center border-circle mr-2" style={{ minWidth: '2rem', minHeight: '2rem' }}>
<i className="pi pi-check"></i>
</span>
<span className="text-green-500">{product.deliveryDate}</span>
</div>
{i !== order.products.length - 1 && <Divider className="w-full block lg:hidden surface-border"></Divider>}
</div>
);
})}
</div>
<div className="col-12 p-0 flex border-top-1 surface-border">
<a
tabIndex={0}
className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full"
style={{ borderBottomLeftRadius: '6px' }}
>
<i className="pi pi-folder mr-2 mb-2 md:mb-1"></i>Archive Order
</a>
<a tabIndex={0} className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full">
<i className="pi pi-refresh mr-2 mb-2 md:mb-1"></i>Return
</a>
<a tabIndex={0} className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full">
<i className="pi pi-file mr-2 mb-2 md:mb-1"></i>View Invoice
</a>
<a
tabIndex={0}
className="cursor-pointer py-4 flex flex-column md:flex-row text-center justify-content-center align-items-center text-primary hover:bg-primary hover:text-0 transition-duration-150 w-full"
style={{ borderBottomRightRadius: '6px' }}
>
<i className="pi pi-comment mr-2 mb-2 md:mb-1"></i>Write a Review
</a>
</div>
</div>
);
})}
</div>
);
}
export default OrderHistory;

171
app/(main)/ecommerce/order-summary/page.tsx Normal file
View File

@@ -0,0 +1,171 @@
'use client';
import { Button } from 'primereact/button';
import { classNames } from 'primereact/utils';
import React from 'react';
function OrderSummary() {
const products = [
{
name: 'Cotton Sweatshirt',
size: 'Medium',
color: 'White',
price: '$12',
quantity: '1',
image: '/demo/images/ecommerce/ordersummary/order-summary-1-1.png'
},
{
name: 'Regular Jeans',
size: 'Large',
color: 'Black',
price: '$24',
quantity: '1',
image: '/demo/images/ecommerce/ordersummary/order-summary-1-2.png'
}
];
return (
<>
<div className="card">
<span className="text-700 text-xl">Thanks!</span>
<div className="text-900 font-bold text-4xl my-2">Successful Order 🚀</div>
<p className="text-700 text-xl mt-0 mb-4 p-0">Your order is on the way. It&lsquo;ll be shipped today. We&lsquo;ll inform you.</p>
<div
style={{
height: '3px',
background: 'linear-gradient(90deg, var(--primary-color) 0%, rgba(33, 150, 243, 0) 50%)'
}}
></div>
<div className="flex flex-column sm:flex-row sm:align-items-center sm:justify-content-between py-5">
<div className="mb-3 sm:mb-0">
<span className="font-medium text-xl text-900 mr-2">Order number:</span>
<span className="font-medium text-xl text-blue-500">451234</span>
</div>
<div>
<Button label="Details" icon="pi pi-list" className="mr-2" outlined></Button>
<Button label="Print" icon="pi pi-print" outlined></Button>
</div>
</div>
<div className="border-round surface-border border-1">
<ul className="list-none p-0 m-0">
{products.map((product, i) => {
return (
<li key={i} className={classNames('p-3 surface-border flex align-items-start sm:align-items-center', { 'border-bottom-1': i !== products.length - 1 })}>
<img src={product.image} className="w-3rem sm:w-8rem flex-shrink-0 mr-3 shadow-2" alt={product.name} />
<div className="flex flex-column">
<span className="text-900 font-semibold text-xl mb-2">{product.name}</span>
<span className="text-700 font-medium mb-3">
{product.color} | {product.size}
</span>
<span className="text-900 font-medium">Quantity: {product.quantity}</span>
</div>
<span className="text-900 font-medium text-lg ml-auto">{product.price}</span>
</li>
);
})}
</ul>
</div>
<div className="flex flex-wrap mt-5 pb-3">
<div className="w-full lg:w-6 pl-3">
<span className="font-medium text-900">Shipping Address</span>
<div className="flex flex-column text-900 mt-3 mb-5">
<span className="mb-1">Celeste Slater</span>
<span className="mb-1">606-3727 Ullamcorper. Roseville NH 11523</span>
<span>(786) 713-8616</span>
</div>
<span className="font-medium text-900">Payment</span>
<div className="flex align-items-center mt-3">
<img src="/demo/images/ecommerce/ordersummary/visa.png" className="w-4rem mr-3" alt="visa" />
<div className="flex flex-column">
<span className="text-900 mb-1">Visa Debit Card</span>
<span className="text-900 font-medium">**** **** **** 1234</span>
</div>
</div>
</div>
<div className="w-full lg:w-6 pl-3 lg:pl-0 lg:pr-3 flex align-items-end mt-5 lg:mt-0">
<ul className="list-none p-0 m-0 w-full">
<li className="mb-3">
<span className="font-medium text-900">Summary</span>
</li>
<li className="flex justify-content-between mb-3">
<span className="text-900">Subtotal</span>
<span className="text-900 font-medium text-lg">$36.00</span>
</li>
<li className="flex justify-content-between mb-3">
<span className="text-900">Shipping</span>
<span className="text-900 font-medium text-lg">$5.00</span>
</li>
<li className="flex justify-content-between mb-3">
<span className="text-900">Tax</span>
<span className="text-900 font-medium text-lg">$4.00</span>
</li>
<li className="flex justify-content-between border-top-1 surface-border py-3">
<span className="text-900 font-medium">Total</span>
<span className="text-900 font-bold text-lg">$41.00</span>
</li>
</ul>
</div>
</div>
</div>
<div className="card">
<div className="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
<span className="text-2xl font-medium text-900">Thanks for your order!</span>
<div className="flex mt-3 sm:mt-0">
<div className="flex flex-column align-items-center">
<span className="text-900 font-medium mb-2">Order ID</span>
<span className="text-700">451234</span>
</div>
<div className="flex flex-column align-items-center ml-6 md:ml-8">
<span className="text-900 font-medium mb-2">Order Date</span>
<span className="text-700">7 Feb 2023</span>
</div>
</div>
</div>
<div className="flex flex-column md:flex-row md:align-items-center border-bottom-1 surface-border py-5">
<img src="/demo/images/ecommerce/ordersummary/order-summary-2-1.png" className="w-15rem flex-shrink-0 md:mr-6" alt="summary-1-2" />
<div className="flex-auto mt-3 md:mt-0">
<span className="text-xl text-900">Product Name</span>
<div className="font-medium text-2xl text-900 mt-3 mb-5">Order Processing</div>
<div className="border-round overflow-hidden surface-300 mb-3" style={{ height: '7px' }}>
<div className="bg-primary border-round w-4 h-full"></div>
</div>
<div className="flex w-full justify-content-between">
<span className="text-900 text-xs sm:text-base">Ordered</span>
<span className="text-900 font-medium text-xs sm:text-base">Processing</span>
<span className="text-500 text-xs sm:text-base">Shipping</span>
<span className="text-500 text-xs sm:text-base">Delivered</span>
</div>
</div>
</div>
<div className="py-5 flex justify-content-between flex-wrap">
<div className="flex sm:mr-5 mb-5">
<span className="font-medium text-900 text-xl mr-8">Product Name</span>
<span className="text-900 text-xl">$21.00</span>
</div>
<div className="flex flex-column sm:mr-5 mb-5">
<span className="font-medium text-900 text-xl">Shipping Address</span>
<div className="flex flex-column text-900 mt-3">
<span className="mb-1">Celeste Slater</span>
<span className="mb-1">606-3727 Ullamcorper. Roseville NH 11523</span>
<span>(786) 713-8616</span>
</div>
</div>
<div className="flex flex-column">
<span className="font-medium text-900 text-xl">Payment</span>
<div className="flex align-items-center mt-3">
<img src="/demo/images/ecommerce/ordersummary/visa.png" className="w-4rem mr-3" alt="visa-2" />
<div className="flex flex-column">
<span className="text-900 mb-1">Visa Debit Card</span>
<span className="text-900 font-medium">**** **** **** 1234</span>
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default OrderSummary;

171
app/(main)/ecommerce/product-list/page.tsx Normal file
View File

@@ -0,0 +1,171 @@
'use client';
import { Button } from 'primereact/button';
import React, { useState } from 'react';
function ProductList() {
const [products] = useState([
{
price: '$140.00',
image: 'demo/images/ecommerce/product-list/product-list-4-1.png'
},
{
price: '$82.00',
image: 'demo/images/ecommerce/product-list/product-list-4-2.png'
},
{
price: '$54.00',
image: 'demo/images/ecommerce/product-list/product-list-4-3.png'
},
{
price: '$72.00',
image: 'demo/images/ecommerce/product-list/product-list-4-4.png'
},
{
price: '$99.00',
image: 'demo/images/ecommerce/product-list/product-list-4-5.png'
},
{
price: '$89.00',
image: 'demo/images/ecommerce/product-list/product-list-4-6.png'
}
]);
const [products2, setProducts2] = useState([
{
color: 'Bluegray',
image: 'demo/images/ecommerce/product-list/product-list-2-1.png'
},
{
color: 'Indigo',
image: 'demo/images/ecommerce/product-list/product-list-2-2.png'
},
{
color: 'Green',
image: 'demo/images/ecommerce/product-list/product-list-2-3.png'
},
{
color: 'Blue',
image: 'demo/images/ecommerce/product-list/product-list-2-4.png'
}
]);
const onColorChange = (color: string, productIndex: number) => {
const _products2 = [...products2];
_products2[productIndex]['color'] = color;
setProducts2(_products2);
};
return (
<>
<div className="card">
<div className="text-900 font-medium text-4xl mb-4">Popular Products</div>
<p className="mt-0 p-0 mb-5 text-700 text-2xl">Exclusive Selection</p>
<div className="grid -mt-3 -ml-3 -mr-3">
{products.map((product, i) => {
return (
<div key={i} className="col-12 md:col-6 lg:col-4">
<div className="p-2">
<div className="shadow-2 p-4 surface-card border-round">
<div className="relative mb-3">
<span
className="surface-card text-900 shadow-2 px-3 py-2 absolute"
style={{
borderRadius: '1.5rem',
left: '1rem',
top: '1rem'
}}
>
Category
</span>
<img src={'/' + product.image} className="w-full" alt={i.toString()} />
</div>
<div className="flex justify-content-between align-items-center mb-3">
<span className="text-900 font-medium text-xl">Product Name</span>
<span>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<span className="font-medium">5.0</span>
</span>
</div>
<p className="mt-0 mb-3 text-700 line-height-3">Enim nec dui nunc mattis enim ut tellus. Tincidunt arcu.</p>
<span className="text-primary text-xl font-medium">{product.price}</span>
</div>
</div>
</div>
);
})}
</div>
</div>
<div className="card">
<div className="grid -mt-3 -ml-3 -mr-3">
{products2.map((product, i) => {
return (
<div key={i} className="col-12 md:col-6 lg:col-3 mb-5 lg:mb-0">
<div className="mb-3 relative">
<img src={'/' + product.image} className="w-full" alt={i.toString()} />
<Button
type="button"
className="border-1 border-white border-round py-2 px-3 absolute bg-black-alpha-30 text-white inline-flex align-items-center justify-content-center hover:bg-black-alpha-40 transition-colors transition-duration-300 cursor-pointer"
style={{
bottom: '1rem',
left: '1rem',
width: 'calc(100% - 2rem)'
}}
>
<i className="pi pi-shopping-cart mr-3 text-base"></i>
<span className="text-base">Add to Cart</span>
</Button>
</div>
<div className="flex flex-column align-items-center">
<span className="text-xl text-900 font-medium mb-3">Product Name</span>
<span className="text-xl text-900 mb-3">$150.00</span>
<div className="flex align-items-center mb-3">
<div
className="w-2rem h-2rem flex-shrink-0 border-circle bg-bluegray-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
style={{
width: '1.2rem',
height: '1.2rem',
boxShadow: product.color === 'Bluegray' ? '0 0 0 0.2rem var(--bluegray-500)' : undefined
}}
onClick={() => onColorChange('Bluegray', i)}
></div>
<div
className="w-2rem h-2rem flex-shrink-0 border-circle bg-indigo-500 hover:border-indigo-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
style={{
width: '1.2rem',
height: '1.2rem',
boxShadow: product.color === 'Indigo' ? '0 0 0 0.2rem var(--indigo-500)' : undefined
}}
onClick={() => onColorChange('Indigo', i)}
></div>
<div
className="w-2rem h-2rem flex-shrink-0 border-circle bg-purple-500 hover:border-purple-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
style={{
width: '1.2rem',
height: '1.2rem',
boxShadow: product.color === 'Green' ? '0 0 0 0.2rem var(--purple-500)' : undefined
}}
onClick={() => onColorChange('Green', i)}
></div>
<div
className="w-2rem h-2rem flex-shrink-0 border-circle bg-cyan-500 hover:border-cyan-500 cursor-pointer border-2 surface-border transition-all transition-duration-300"
style={{
width: '1.2rem',
height: '1.2rem',
boxShadow: product.color === 'Blue' ? '0 0 0 0.2rem var(--cyan-500)' : undefined
}}
onClick={() => onColorChange('Blue', i)}
></div>
</div>
<span className="text-700">{product.color}</span>
</div>
</div>
);
})}
</div>
</div>
</>
);
}
export default ProductList;

284
app/(main)/ecommerce/product-overview/page.tsx Normal file
View File

@@ -0,0 +1,284 @@
'use client';
import { Button } from 'primereact/button';
import { InputNumber } from 'primereact/inputnumber';
import { TabPanel, TabView } from 'primereact/tabview';
import { classNames } from 'primereact/utils';
import React, { useEffect, useState } from 'react';
function ProductOverview() {
const [images, setImages] = useState<string[]>([]);
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
const [liked, setLiked] = useState(false);
const [quantity, setQuantity] = useState(1);
const [color, setColor] = useState('bluegray');
const [size, setSize] = useState('M');
useEffect(() => {
setImages(['product-overview-3-1.png', 'product-overview-3-2.png', 'product-overview-3-3.png', 'product-overview-3-4.png']);
}, [selectedImageIndex]);
return (
<div className="card">
<div className="grid mb-7">
<div className="col-12 lg:col-7">
<div className="flex">
<div className="flex flex-column w-2 justify-content-between" style={{ rowGap: '1rem' }}>
{images.map((image, i) => {
return (
<img
alt={i.toString()}
key={i}
src={`/demo/images/ecommerce/productoverview/${image}`}
className={classNames('w-full cursor-pointer border-2 border-transparent transition-colors transition-duration-150 border-round', { 'border-primary': selectedImageIndex === i })}
onClick={() => setSelectedImageIndex(i)}
/>
);
})}
</div>
<div className="pl-3 w-10 flex">
<img alt={images[selectedImageIndex]} src={`/demo/images/ecommerce/productoverview/${images[selectedImageIndex]}`} className="w-full border-2 border-transparent border-round" />
</div>
</div>
</div>
<div className="col-12 lg:col-4 py-3 lg:pl-6">
<div className="flex align-items-center text-xl font-medium text-900 mb-4">Product Title Placeholder</div>
<div className="flex align-items-center justify-content-between mb-5">
<span className="text-900 font-medium text-3xl block">$120</span>
<div className="flex align-items-center">
<span className="mr-3">
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star text-600 mr-1"></i>
</span>
<span className="text-sm">
<b className="text-900 mr-1">24</b> <span className="text-500"></span>reviews
</span>
</div>
</div>
<div className="font-bold text-900 mb-3">Color</div>
<div className="flex align-items-center mb-5">
<div
className="w-2rem h-2rem flex-shrink-0 border-circle bg-bluegray-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
style={{
boxShadow: color === 'bluegray' ? '0 0 0 0.2rem var(--bluegray-500)' : undefined
}}
onClick={() => setColor('bluegray')}
></div>
<div
className="w-2rem h-2rem flex-shrink-0 border-circle bg-green-500 mr-3 cursor-pointer border-2 surface-border transition-all transition-duration-300"
style={{
boxShadow: color === 'green' ? '0 0 0 0.2rem var(--green-500)' : undefined
}}
onClick={() => setColor('green')}
></div>
<div
className="w-2rem h-2rem flex-shrink-0 border-circle bg-blue-500 cursor-pointer border-2 surface-border transition-all transition-duration-300"
style={{
boxShadow: color === 'blue' ? '0 0 0 0.2rem var(--blue-500)' : undefined
}}
onClick={() => setColor('blue')}
></div>
</div>
<div className="mb-3 flex align-items-center justify-content-between">
<span className="font-bold text-900">Size</span>
<a tabIndex={0} className="cursor-pointer text-600 text-sm flex align-items-center">
Size Guide <i className="ml-1 pi pi-angle-right"></i>
</a>
</div>
<div className="grid grid-nogutter align-items-center mb-5">
<div
className={classNames(
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
{ 'border-primary border-2 text-primary': size === 'XS' }
)}
onClick={() => setSize('XS')}
>
XS
</div>
<div
className={classNames(
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
{ 'border-primary border-2 text-primary': size === 'S' }
)}
onClick={() => setSize('S')}
>
S
</div>
<div
className={classNames(
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
{ 'border-primary border-2 text-primary': size === 'M' }
)}
onClick={() => setSize('M')}
>
M
</div>
<div
className={classNames(
'col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round mr-3 cursor-pointer hover:surface-100 transition-duration-150 transition-colors',
{ 'border-primary border-2 text-primary': size === 'L' }
)}
onClick={() => setSize('L')}
>
L
</div>
<div
className={classNames('col h-3rem border-1 border-300 text-900 inline-flex justify-content-center align-items-center flex-shrink-0 border-round cursor-pointer hover:surface-100 transition-duration-150 transition-colors', {
'border-primary border-2 text-primary': size === 'XL'
})}
onClick={() => setSize('XL')}
>
XL
</div>
</div>
<div className="font-bold text-900 mb-3">Quantity</div>
<div className="flex flex-column sm:flex-row sm:align-items-center sm:justify-content-between">
<InputNumber
showButtons
buttonLayout="horizontal"
min={0}
inputClassName="w-3rem text-center"
value={quantity}
onChange={(e) => setQuantity(e.value ?? 0)}
decrementButtonClassName="p-button-text"
incrementButtonClassName="p-button-text"
incrementButtonIcon="pi pi-plus"
decrementButtonIcon="pi pi-minus"
></InputNumber>
<div className="flex align-items-center flex-1 mt-3 sm:mt-0 ml-0 sm:ml-5">
<Button label="Add to Cart" className="flex-1 mr-5"></Button>
<i
className={classNames('pi text-2xl cursor-pointer', {
'pi-heart text-600': !liked,
'pi-heart-fill text-orange-500': liked
})}
onClick={() => setLiked(!liked)}
></i>
</div>
</div>
</div>
</div>
<TabView>
<TabPanel header="Details">
<div className="text-900 font-bold text-3xl mb-4 mt-2">Product Details</div>
<p className="line-height-3 text-600 p-0 mx-0 mt-0 mb-4">
Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Duis ultricies lacus sed turpis tincidunt id. Sed tempus urna et pharetra. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Venenatis
urna cursus eget nunc scelerisque viverra mauris in. Viverra justo nec ultrices dui sapien eget mi proin. Laoreet suspendisse interdum consectetur libero id faucibus.
</p>
<div className="grid">
<div className="col-12 lg:col-4">
<span className="text-900 block font-medium mb-3 font-bold">Highlights</span>
<ul className="py-0 pl-3 m-0 text-600 mb-3">
<li className="mb-2">Vulputate sapien nec.</li>
<li className="mb-2">Purus gravida quis blandit.</li>
<li className="mb-2">Nisi quis eleifend quam adipiscing.</li>
<li>Imperdiet proin fermentum.</li>
</ul>
</div>
<div className="col-12 lg:col-4">
<span className="text-900 block mb-3 font-bold">Size and Fit</span>
<ul className="list-none p-0 m-0 text-600 mb-4 text-600">
<li className="mb-3">
<span className="font-semibold">Leo vel:</span> Egestas congue.
</li>
<li className="mb-3">
<span className="font-semibold">Sociis natoque:</span> Parturient montes nascetur.
</li>
<li>
<span className="font-semibold">Suspendisse in:</span> Purus sit amet volutpat.
</li>
</ul>
</div>
<div className="col-12 lg:col-4">
<span className="text-900 block mb-3 font-bold">Material & Care</span>
<ul className="p-0 m-0 flex flex-wrap flex-column xl:flex-row text-600">
<li className="flex align-items-center white-space-nowrap w-10rem block mr-2 mb-3">
<i className="pi pi-sun mr-2 text-900"></i>
<span>Not dryer safe</span>
</li>
<li className="flex align-items-center white-space-nowrap w-10rem block mb-3">
<i className="pi pi-times-circle mr-2 text-900"></i>
<span>No chemical wash</span>
</li>
<li className="flex align-items-center white-space-nowrap w-10rem block mb-3 mr-2">
<i className="pi pi-sliders-h mr-2 text-900"></i>
<span>Iron medium heat</span>
</li>
<li className="flex align-items-center white-space-nowrap w-10rem block mb-3">
<i className="pi pi-minus-circle mr-2 text-900"></i>
<span>Dry flat</span>
</li>
</ul>
</div>
</div>
</TabPanel>
<TabPanel header="Reviews">
<div className="text-900 font-bold text-3xl mb-4 mt-2">Customer Reviews</div>
<ul className="list-none p-0 m-0">
<li className="pb-5 border-bottom-1 surface-border">
<span>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-gray-500"></i>
</span>
<div className="text-900 font-bold text-xl my-3">Absolute Perfection!</div>
<p className="mx-0 mt-0 mb-3 text-600 line-height-3">
Blandit libero volutpat sed cras ornare arcu dui vivamus. Arcu dictum varius duis at consectetur lorem donec massa. Imperdiet proin fermentum leo vel orci porta non. Porttitor rhoncus dolor purus non.
</p>
<span className="font-medium">Darlene Robertson, 2 days ago</span>
</li>
<li className="py-5 border-bottom-1 surface-border">
<span>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500 mr-1"></i>
<i className="pi pi-star-fill text-yellow-500"></i>
</span>
<div className="text-900 font-bold text-xl my-3">Classy</div>
<p className="mx-0 mt-0 mb-3 text-600 line-height-3">Venenatis cras sed felis eget. Proin nibh nisl condimentum id venenatis a condimentum.</p>
<span className="font-medium">Kristin Watson, 2 days ago</span>
</li>
</ul>
</TabPanel>
<TabPanel header="Shipping and Returns">
<div className="text-900 font-bold text-3xl mb-4 mt-2">Shipping Placeholder</div>
<p className="line-height-3 text-600 p-0 mx-0 mt-0 mb-4">
Mattis aliquam faucibus purus in massa tempor nec feugiat nisl. Justo donec enim diam vulputate ut pharetra. Tempus egestas sed sed risus. Feugiat sed lectus vestibulum mattis. Tristique nulla aliquet enim tortor at auctor
urna nunc. Habitant morbi tristique senectus et. Facilisi nullam vehicula ipsum.
</p>
<div className="grid">
<div className="col-12 md:col-6">
<span className="text-900 block font-bold mb-3 font-bold">Shipping Costs</span>
<ul className="py-0 pl-3 m-0 text-600 mb-3">
<li className="mb-2">Japan - JPY 2,500.</li>
<li className="mb-2">Europe - EUR 10</li>
<li className="mb-2">Switzerland - CHF 10</li>
<li className="mb-2">Canada - CAD 25</li>
<li className="mb-2">USA - USD 20</li>
<li className="mb-2">Australia - AUD 30</li>
<li className="mb-2">United Kingdom - GBP 10</li>
</ul>
</div>
<div className="col-12 md:col-6">
<span className="text-900 block font-bold mb-3">Return Policy</span>
<p className="line-height-3 text-600 p-0 m-0">Pharetra et ultrices neque ornare aenean euismod elementum nisi. Diam phasellus vestibulum lorem sed. Mattis molestie a iaculis at. </p>
</div>
</div>
</TabPanel>
</TabView>
</div>
);
}
export default ProductOverview;

129
app/(main)/ecommerce/shopping-cart/page.tsx Normal file
View File

@@ -0,0 +1,129 @@
'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;