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/ExpiringPoints/ExpiringPointsTable/index.tsx
+++ b/components/Blocks/DynamicContent/Points/ExpiringPoints/ExpiringPointsTable/index.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import Table from "@/components/TempDesignSystem/Table"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
+
+import AwardPoints from "../../EarnAndBurn/AwardPoints"
+
+const tableHeadings = ["Points", "Expiration Date"]
+
+export default function ExpiringPointsTable({
+  points,
+  expirationDate,
+}: {
+  points: number
+  expirationDate: string
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+  const expiration = dt(expirationDate).locale(lang).format("DD MMM YYYY")
+
+  return (
+    <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>
+        <Table.TR>
+          <Table.TD>
+            <AwardPoints awardPoints={points} isCalculated isExpiringPoints />
+          </Table.TD>
+          <Table.TD>{expiration}</Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  )
+}