167 lines
9.6 KiB
TypeScript
167 lines
9.6 KiB
TypeScript
'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;
|