58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Table from "@/components/TempDesignSystem/Table"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import Row from "./Row"
|
|
|
|
import styles from "./clientTable.module.css"
|
|
|
|
import type { ClientTableProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
|
|
|
const tableHeadings = [
|
|
"Points",
|
|
"Description",
|
|
"Booking number",
|
|
"Arrival date",
|
|
]
|
|
|
|
export default function ClientTable({ transactions }: ClientTableProps) {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Table>
|
|
<Table.THead>
|
|
<Table.TR>
|
|
{tableHeadings.map((heading) => (
|
|
<Table.TH key={heading}>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: heading })}
|
|
</Body>
|
|
</Table.TH>
|
|
))}
|
|
</Table.TR>
|
|
</Table.THead>
|
|
<Table.TBody>
|
|
{transactions.length ? (
|
|
transactions.map((transaction, index) => (
|
|
<Row
|
|
key={`${transaction.confirmationNumber}-${index}`}
|
|
transaction={transaction}
|
|
/>
|
|
))
|
|
) : (
|
|
<Table.TR className={styles.placeholder}>
|
|
<Table.TD colSpan={tableHeadings.length}>
|
|
{intl.formatMessage({ id: "No transactions available" })}
|
|
</Table.TD>
|
|
</Table.TR>
|
|
)}
|
|
</Table.TBody>
|
|
</Table>
|
|
</div>
|
|
)
|
|
}
|