feat(SW-66, SW-348): search functionality and ui

2024-08-28 10:47:57 +02:00
parent b9dbcf7d90
commit af850c90e7
437 changed files with 7663 additions and 9881 deletions
--- a/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/index.tsx
+++ b/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/index.tsx
@@ -0,0 +1,57 @@
+"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>
+  )
+}