feat: add initial support for points page

components/MyPages/Blocks/Points/EarnAndBurn/earnAndBurn.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.thead {
+  background-color: var(--Base-Fill-Normal);
+  border-left: 1px solid var(--Base-Fill-Normal);
+  border-right: 1px solid var(--Base-Fill-Normal);
+}
+
+.tr {
+  border: 1px solid #e6e9ec;
+}
+
+.th {
+  text-align: left;
+  padding: 20px 32px;
+}
+
+.td {
+  text-align: left;
+  padding: 16px 32px;
+}

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -0,0 +1,44 @@
+import { _ } from "@/lib/translation"
+
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./earnAndBurn.module.css"
+
+const EarnAndBurn = () => {
+  return (
+    <div className={styles.container}>
+      <table className={styles.table}>
+        <thead className={styles.thead}>
+          <tr>
+            <th className={styles.th}>{_("Arrival date")}</th>
+            <th className={styles.th}>{_("Description")}</th>
+            <th className={styles.th}>{_("Booking number")}</th>
+            <th className={styles.th}>{_("Transaction date")}</th>
+            <th className={styles.th}>{_("Points")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className={styles.tr}>
+            <td className={styles.td}>23 May 2023</td>
+            <td className={styles.td}>Scandic Mölndal, Mölndal 2 nights</td>
+            <td className={styles.td}>5123456576</td>
+            <td className={styles.td}>26 May 2023</td>
+            <td className={styles.td}>30000</td>
+          </tr>
+          <tr className={styles.tr}>
+            <td className={styles.td}>23 May 2023</td>
+            <td className={styles.td}>Scandic Mölndal, Mölndal 2 nights</td>
+            <td className={styles.td}>5123456576</td>
+            <td className={styles.td}>26 May 2023</td>
+            <td className={styles.td}>-30000</td>
+          </tr>
+        </tbody>
+      </table>
+      <Button intent="primary" bgcolor="white" type="button">
+        {_("See more transactions")}
+      </Button>
+    </div>
+  )
+}
+
+export default EarnAndBurn