75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import Row from "./Row"
|
|
|
|
import styles from "./desktop.module.css"
|
|
|
|
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
|
|
|
const tableHeadings = [
|
|
"Arrival date",
|
|
"Description",
|
|
"Booking number",
|
|
"Transaction date",
|
|
"Points",
|
|
]
|
|
|
|
export default function DesktopTable({ lang, transactions }: TableProps) {
|
|
const { formatMessage } = useIntl()
|
|
return (
|
|
<div className={styles.container}>
|
|
{transactions.length ? (
|
|
<table className={styles.table}>
|
|
<thead className={styles.thead}>
|
|
<tr>
|
|
{tableHeadings.map((heading) => (
|
|
<th key={heading} className={styles.th}>
|
|
{formatMessage({ id: heading })}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transactions.map((transaction) => (
|
|
<Row
|
|
lang={lang}
|
|
key={transaction.confirmationNumber}
|
|
transaction={transaction}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
) : (
|
|
// TODO: add once pagination is available through API
|
|
// <Button
|
|
// disabled={isFetching}
|
|
// intent="primary"
|
|
// bgcolor="white"
|
|
// type="button"
|
|
// onClick={loadMoreData}
|
|
// >
|
|
// {formatMessage({id:"See more transactions"})}
|
|
// </Button>
|
|
<table className={styles.table}>
|
|
<thead className={styles.thead}>
|
|
<tr>
|
|
{tableHeadings.map((heading) => (
|
|
<th key={heading} className={styles.th}>
|
|
{heading}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colSpan={tableHeadings.length} className={styles.placeholder}>
|
|
{formatMessage({ id: "No transactions available" })}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|