61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { dt } from "@/lib/dt"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import styles from "./mobile.module.css"
|
|
|
|
import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
|
|
|
|
export default async function MobileTable({ lang, transactions }: TableProps) {
|
|
const { formatMessage } = await getIntl()
|
|
return (
|
|
<div className={styles.container}>
|
|
<table className={styles.table}>
|
|
<thead className={styles.thead}>
|
|
<tr>
|
|
<Body asChild>
|
|
<th className={styles.th}>
|
|
{formatMessage({ id: "Transactions" })}
|
|
</th>
|
|
</Body>
|
|
<Body asChild>
|
|
<th className={styles.th}>{formatMessage({ id: "Points" })}</th>
|
|
</Body>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transactions.length ? (
|
|
transactions.map((transaction) => (
|
|
<tr className={styles.tr} key={transaction.confirmationNumber}>
|
|
<td className={`${styles.td} ${styles.transactionDetails}`}>
|
|
<span className={styles.transactionDate}>
|
|
{dt(transaction.checkinDate)
|
|
.locale(lang)
|
|
.format("DD MMM YYYY")}
|
|
</span>
|
|
{transaction.hotelName && transaction.city ? (
|
|
<span>{`${transaction.hotelName}, ${transaction.city}`}</span>
|
|
) : null}
|
|
<span>
|
|
{`${transaction.nights} ${formatMessage({ id: transaction.nights === 1 ? "night" : "nights" })}`}
|
|
</span>
|
|
</td>
|
|
<td className={styles.transactionPoints}>
|
|
{`${transaction.awardPoints} P`}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td className={styles.placeholder} colSpan={2}>
|
|
{formatMessage({ id: "Empty" })}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|