fix: breakout header component to blocks header

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -3,26 +3,6 @@
   gap: 1.5rem;
 }
 
-.header {
-  display: grid;
-  grid-template-areas: "title link";
-  grid-template-columns: 1fr max-content;
-}
-
-.title {
-  grid-area: title;
-  font-weight: 600;
-  color: var(--some-black-color, #111);
-  text-align: center;
-}
-
-.link {
-  grid-area: link;
-}
-.subtitle {
-  margin: 0;
-  font-size: 2rem;
-}
 .value {
   color: var(--Theme-Primary-Light-On-Surface-Text);
 }
@@ -60,9 +40,3 @@
   color: var(--Theme-Primary-Light-On-Surface-Text);
   aspect-ratio: 1/1;
 }
-
-@media screen and (min-width: 950px) {
-  .card:nth-child(2) {
-    grid-area: card2;
-  }
-}

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

@@ -3,6 +3,7 @@ import Link from "next/link"
 import { Lang } from "@/constants/languages"
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/MyPages/Blocks/Header"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
 import Title from "@/components/Title"
 
@@ -34,28 +35,10 @@ export default async function CurrentBenefitsBlock({
 
   return (
     <section className={styles.container}>
-      <header className={styles.header}>
-        {title && (
-          <Title
-            as="h3"
-            level="h2"
-            weight={"medium"}
-            className={styles.title}
-            uppercase
-          >
-            {title}
-          </Title>
-        )}
-        {link && (
-          <Link className={styles.link} href={link.href}>
-            {link.text}
-          </Link>
-        )}
-      </header>
-      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+      <Header title={title} link={link} subtitle={subtitle} />
 
       <CardGrid>
-      {currentLevel.benefits.map((benefit, idx) => (
+        {currentLevel.benefits.map((benefit, idx) => (
           <Link
             href={benefit.href}
             key={`${currentLevel}-${idx}`}