108 lines
3.6 KiB
TypeScript
108 lines
3.6 KiB
TypeScript
const rows = [
|
|
{
|
|
item: "Headphone",
|
|
qty: 2,
|
|
price: "$600.25",
|
|
total: "$1200.50",
|
|
},
|
|
{
|
|
item: "Headphone",
|
|
qty: 2,
|
|
price: "$600.25",
|
|
total: "$1200.50",
|
|
},
|
|
{
|
|
item: "Headphone",
|
|
qty: 2,
|
|
price: "$600.25",
|
|
total: "$1200.50",
|
|
},
|
|
{
|
|
item: "Headphone",
|
|
qty: 2,
|
|
price: "$600.25",
|
|
total: "$1200.50",
|
|
},
|
|
];
|
|
|
|
const TotalTable = () => {
|
|
return (
|
|
<div>
|
|
<table className="w-full border-collapse table-fixed dark:border-default-500 dark:border dark:border-solid">
|
|
<thead>
|
|
<tr className="overflow-hidden">
|
|
<th
|
|
colSpan={3}
|
|
className="bg-default-100 text-xs font-medium leading-4 uppercase text-default-600 text-left last:text-right "
|
|
>
|
|
<span className="block px-6 py-5 font-semibold">ITEM</span>
|
|
</th>
|
|
<th className="bg-default-100 text-xs font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
|
|
<span className="block px-6 py-5 font-semibold">QTY</span>
|
|
</th>
|
|
<th className="bg-default-100 text-xs font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
|
|
<span className="block px-6 py-5 font-semibold">PRICE</span>
|
|
</th>
|
|
<th className="bg-default-100 text-xs font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
|
|
<span className="block px-6 py-5 font-semibold">TOTAL</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((data, index) => (
|
|
<tr
|
|
key={index}
|
|
className="border-b border-default-100 border-solid border-0"
|
|
>
|
|
<td
|
|
colSpan={3}
|
|
className="text-default-900 text-sm font-normal text-left last:text-right px-6 py-4"
|
|
>
|
|
{data.item}
|
|
</td>
|
|
<td className="text-default-900 text-sm font-normal text-left last:text-right px-6 py-4">
|
|
{data.qty}
|
|
</td>
|
|
<td className="text-default-900 text-sm font-normal text-left last:text-right px-6 py-4">
|
|
{data.price}
|
|
</td>
|
|
<td className="text-default-900 text-sm font-normal text-left last:text-right px-6 py-4">
|
|
{data.total}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
<div className="md:flex px-6 py-6 items-center">
|
|
<div className="flex-1 text-default-500 text-sm">
|
|
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
|
|
sint. Velit <br />
|
|
officia consequat duis enim velit mollit.
|
|
</div>
|
|
<div className="flex-none min-w-[270px] space-y-3">
|
|
<div className="flex justify-between">
|
|
<span className="font-medium text-default-600 text-xs uppercase">
|
|
subtotal:
|
|
</span>
|
|
<span className="text-default-900 ">$3601.50</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="font-medium text-default-600 text-xs uppercase">
|
|
vat (3.5%):
|
|
</span>
|
|
<span className="text-default-900 ">$20.50</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="font-medium text-default-600 text-xs uppercase">
|
|
Invoice total:
|
|
</span>
|
|
<span className="text-default-900 font-bold">$3622.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TotalTable;
|