feat: add initial mobile layout for earn and burn

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

@@ -1,19 +1,32 @@
 import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/MyPages/Blocks/Header"
+
 import styles from "./currentPointsBalance.module.css"
 
-async function CurrentPointsBalance() {
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+async function CurrentPointsBalance({
+  title,
+  subtitle,
+  link,
+  lang,
+}: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   return (
-    <div className={styles.card}>
-      <h2>{`${_("Total points")}*`}</h2>
-      <p
-        className={styles.points}
-      >{`${_("Points")}: ${user.membership?.currentPoints || "N/A"}`}</p>
-      <p className={styles.disclaimer}>
-        {`*${_("Points may take up to 10 days to be displayed.")}`}
-      </p>
+    <div>
+      <Header title={title} link={link} subtitle={subtitle} />
+
+      <div className={styles.card}>
+        <h2>{`${_("Total points")}*`}</h2>
+        <p
+          className={styles.points}
+        >{`${_("Points")}: ${user.membership?.currentPoints || "N/A"}`}</p>
+        <p className={styles.disclaimer}>
+          {`*${_("Points may take up to 10 days to be displayed.")}`}
+        </p>
+      </div>
     </div>
   )
 }