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}`}

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

@@ -3,9 +3,9 @@ import { Lock } from "react-feather"
 
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/MyPages/Blocks/Header"
 import Button from "@/components/TempDesignSystem/Button"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
-import Title from "@/components/Title"
 
 import styles from "./next.module.css"
 
@@ -20,25 +20,7 @@ export default async function NextLevelBenefitsBlock({
 
   return (
     <section className={styles.container}>
-      <header className={styles.header}>
-        {title && (
-          <Title
-            as="h3"
-            level="h2"
-            uppercase
-            weight="medium"
-            className={styles.title}
-          >
-            {title}
-          </Title>
-        )}
-        {link && (
-          <Link className={styles.link} href={link.href}>
-            {link.text}
-          </Link>
-        )}
-      </header>
-      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+      <Header title={title} subtitle={subtitle} link={link} />
       <CardGrid variant="twoColumnGrid">
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>

components/MyPages/Blocks/Benefits/NextLevel/next.module.css

@@ -2,22 +2,6 @@
   display: grid;
   gap: 1.5rem;
 }
-
-.header {
-  display: grid;
-  grid-template-areas: "title link";
-  grid-template-columns: 1fr max-content;
-}
-
-.title {
-  grid-area: title;
-  font-weight: 600;
-}
-
-.link {
-  grid-area: link;
-}
-
 .cardContainer {
   display: grid;
   gap: 0.4rem;

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -6,8 +6,8 @@ import { trpc } from "@/lib/trpc/client"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
 
+import Header from "../../Header"
 import Container from "../Container"
-import Header from "../Header"
 import ListContainer from "../ListContainer"
 import ShowMoreButton from "../ShowMoreButton"
 import StayCard from "../StayCard"

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -3,7 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 import MaxWidth from "@/components/MaxWidth"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
 
-import Header from "../Header"
+import Header from "../../Header"
 import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -6,8 +6,8 @@ import { trpc } from "@/lib/trpc/client"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import CardGrid from "@/components/TempDesignSystem/CardGrid"
 
+import Header from "../../Header"
 import Container from "../Container"
-import Header from "../Header"
 import ListContainer from "../ListContainer"
 import ShowMoreButton from "../ShowMoreButton"
 import StayCard from "../StayCard"