138 lines
5.9 KiB
TypeScript
138 lines
5.9 KiB
TypeScript
import React from "react";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import { getProducts } from "../../data";
|
|
import Image from "next/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Link } from '@/i18n/routing';
|
|
const CartPage = async () => {
|
|
const products = await getProducts();
|
|
const items = products.slice(0, 4);
|
|
return (
|
|
<div>
|
|
<div className=" space-y-7">
|
|
<div className="overflow-x-auto border-0">
|
|
<div className="inline-block min-w-full align-middle">
|
|
<div className="overflow-hidden border-solid border-default-300 border rounded-md">
|
|
<table className="min-w-full divide-y divide-default-300 table-fixed ">
|
|
<thead className="border-0">
|
|
<tr>
|
|
<th scope="col" className=" text-left px-3 py-3">
|
|
Product
|
|
</th>
|
|
<th scope="col" className=" text-left py-3">
|
|
Price
|
|
</th>
|
|
<th scope="col" className="px-3 text-left py-3">
|
|
Quantity
|
|
</th>
|
|
<th scope="col" className=" text-left py-3">
|
|
Total
|
|
</th>
|
|
<th scope="col" className=" text-right py-3 pe-3">
|
|
Remove
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-trasparent divide-default-300">
|
|
{items.length > 0 ? (
|
|
items?.map((item, i) => (
|
|
<tr key={i}>
|
|
<td className="inline-flex items-center gap-3 py-3">
|
|
<div className="md:p-4 p-2 flex-none bg-default-200 dark:bg-default-900 rounded md:h-20 md:w-20 w-16 h-16 ms-3">
|
|
<Image
|
|
alt="product"
|
|
src={item.img}
|
|
width={100}
|
|
height={100}
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<p className="text-default-900 md:text-base text-sm font-medium md:pb-2 pb-1 md:w-[280px] w-[100px] truncate">
|
|
{item.name}
|
|
</p>
|
|
<p className="text-default-900 md:text-base text-sm font-medium">
|
|
<span className="text-default-500 font-normal mr-1">
|
|
Brand:
|
|
</span>
|
|
{item.brand}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-3">${item.price}</td>
|
|
<td className=" px-3 py-3">
|
|
<div className="flex-1 h-8 w-[110px] flex border border-1 border-default-900 delay-150 ease-in-out divide-x-[1px] rtl:divide-x-reverse text-sm font-normal divide-default-900 rounded">
|
|
<button className="md:px-3 px-2 disabled:cursor-not-allowed">
|
|
<Icon icon="eva:minus-fill" />
|
|
</button>
|
|
|
|
<span className="flex-1 text-xs text-center flex items-center justify-center">
|
|
0
|
|
</span>
|
|
<button className="md:px-3 px-2 disabled:cursor-not-allowed">
|
|
<Icon icon="eva:plus-fill" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td className=" px-3 py-3">${item.price}</td>
|
|
<td className=" text-right px-6 py-3">
|
|
<button className="bg-default-100 text-default-400 p-2.5 transition-all mb-1.5 rounded-full hover:bg-destructive/20 hover:text-destructive duration-200 ">
|
|
<Icon icon="heroicons:trash" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className=" text-center h-24 " colSpan={5}>
|
|
{`No result's`}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
<tfoot className="mx-6">
|
|
<tr className="border-t border-default-300 border-solid">
|
|
<td className=" px-3 py-3 " colSpan={4}>
|
|
<p className="md:text-base text-sm font-medium text-default-500 ">
|
|
Subtotal:
|
|
</p>
|
|
</td>
|
|
<td className=" px-6 py-3 text-right">
|
|
<p className="md:text-base text-sm font-medium text-default-900 ">
|
|
$200
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 md:mt-16 md:pb-14">
|
|
<div className="flex-1">
|
|
<Button asChild
|
|
variant="outline">
|
|
<Link href="/ecommerce/frontend">
|
|
<Icon icon="ion:arrow-back-outline" className="me-1" />
|
|
Add New Product
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
<div className="flex-none">
|
|
<Button asChild disabled>
|
|
<Link href="#">Go Back</Link>
|
|
</Button>
|
|
</div>
|
|
<div className="flex-none">
|
|
<Button asChild>
|
|
<Link href="/ecommerce/frontend/checkout/shipping-info"> Continue to shipping</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CartPage;
|