feat: add mapping of benefits AccountPage

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -6,20 +6,37 @@ import Title from "@/components/Title"
 
 import styles from "./current.module.css"
 
-export default async function CurrentBenefitsBlock() {
+export type CurrentLevelProps = {
+  title: string
+  preamble?: string
+}
+
+export default async function CurrentBenefitsBlock({
+  title,
+  preamble,
+}: CurrentLevelProps) {
   const benefits = await serverClient().user.benefits.current()
 
   return (
-    <section className={styles.container}>
-      {benefits.map((benefit) => (
-        <Link href={benefit.href} key={benefit.id} className={styles.card}>
-          <Title level="h3" as="h5" className={styles.title}>
-            <span className={styles.value}>{benefit.value}</span>{" "}
-            {benefit.explanation}
-          </Title>
-          <p className={styles.subtitle}>{benefit.subtitle}</p>
-        </Link>
-      ))}
+    <section>
+      <header className={styles.header}>
+        <Title as="h4" level="h2" className={styles.title} uppercase>
+          {title}
+        </Title>
+        {preamble && <p className={styles.preamble}>{preamble}</p>}
+      </header>
+
+      <div className={styles.cardContainer}>
+        {benefits.map((benefit) => (
+          <Link href={benefit.href} key={benefit.id} className={styles.card}>
+            <Title as="h5" level="h3" className={styles.title}>
+              <span className={styles.value}>{benefit.value}</span>{" "}
+              {benefit.explanation}
+            </Title>
+            <p className={styles.subtitle}>{benefit.subtitle}</p>
+          </Link>
+        ))}
+      </div>
     </section>
   )
 }