100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
|
const payments = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
date: new Date(),
|
||
|
|
description: "",
|
||
|
|
amount: "340 USD",
|
||
|
|
href: "",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
date: new Date(),
|
||
|
|
description: "",
|
||
|
|
amount: "340 USD",
|
||
|
|
href: "",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
date: new Date(),
|
||
|
|
description: "",
|
||
|
|
amount: "340 USD",
|
||
|
|
href: "",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function BillingHistory() {
|
||
|
|
return (
|
||
|
|
<section>
|
||
|
|
<div className="bg-white pt-6 shadow sm:rounded-md sm:overflow-hidden">
|
||
|
|
<div className="px-4 sm:px-6">
|
||
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">Billing history</h2>
|
||
|
|
</div>
|
||
|
|
<div className="mt-6 flex flex-col">
|
||
|
|
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||
|
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||
|
|
<div className="overflow-hidden border-t border-gray-200">
|
||
|
|
<table className="min-w-full divide-y divide-gray-200">
|
||
|
|
<thead className="bg-gray-50">
|
||
|
|
<tr>
|
||
|
|
<th
|
||
|
|
scope="col"
|
||
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
|
|
>
|
||
|
|
Date
|
||
|
|
</th>
|
||
|
|
<th
|
||
|
|
scope="col"
|
||
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
|
|
>
|
||
|
|
Description
|
||
|
|
</th>
|
||
|
|
<th
|
||
|
|
scope="col"
|
||
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
|
|
>
|
||
|
|
Amount
|
||
|
|
</th>
|
||
|
|
{/*
|
||
|
|
`relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile.
|
||
|
|
*/}
|
||
|
|
<th
|
||
|
|
scope="col"
|
||
|
|
className="relative px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||
|
|
>
|
||
|
|
<span className="sr-only">View receipt</span>
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
||
|
|
{payments.map((payment) => (
|
||
|
|
<tr key={payment.id}>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||
|
|
<time>{payment.date.toDateString()}</time>
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
{payment.description}
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||
|
|
{payment.amount}
|
||
|
|
</td>
|
||
|
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||
|
|
<a
|
||
|
|
href={payment.href}
|
||
|
|
className="text-primary-600 hover:text-primary-900"
|
||
|
|
>
|
||
|
|
View receipt
|
||
|
|
</a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|