From 51287c11dfa35f0b7dedaf37f989f9887a10941f Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Tue, 14 May 2024 11:36:28 +0200
Subject: [PATCH] fix: breakout header component to blocks header

---
 .../Benefits/CurrentLevel/current.module.css  | 26 -------------------
 .../Blocks/Benefits/CurrentLevel/index.tsx    | 23 +++-------------
 .../Blocks/Benefits/NextLevel/index.tsx       | 22 ++--------------
 .../Blocks/Benefits/NextLevel/next.module.css | 16 ------------
 .../{Stays => }/Header/header.module.css      |  0
 .../Blocks/{Stays => }/Header/index.tsx       |  0
 .../MyPages/Blocks/Stays/Previous/index.tsx   |  2 +-
 .../MyPages/Blocks/Stays/Soonest/index.tsx    |  2 +-
 .../MyPages/Blocks/Stays/Upcoming/index.tsx   |  2 +-
 9 files changed, 8 insertions(+), 85 deletions(-)
 rename components/MyPages/Blocks/{Stays => }/Header/header.module.css (100%)
 rename components/MyPages/Blocks/{Stays => }/Header/index.tsx (100%)

diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
index e22e5eb66..5c4fc1a9f 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
+++ b/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;
-  }
-}
diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx b/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
index 1308b81e4..e6c87bf5e 100644
--- a/components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
+++ b/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}`}
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
index 9471ec79e..8497a4945 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
+++ b/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}>
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
index dea0bf6f9..dd9f8edc9 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
+++ b/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;
diff --git a/components/MyPages/Blocks/Stays/Header/header.module.css b/components/MyPages/Blocks/Header/header.module.css
similarity index 100%
rename from components/MyPages/Blocks/Stays/Header/header.module.css
rename to components/MyPages/Blocks/Header/header.module.css
diff --git a/components/MyPages/Blocks/Stays/Header/index.tsx b/components/MyPages/Blocks/Header/index.tsx
similarity index 100%
rename from components/MyPages/Blocks/Stays/Header/index.tsx
rename to components/MyPages/Blocks/Header/index.tsx
diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx
index dd7d599a5..a1ca86d64 100644
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/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"
diff --git a/components/MyPages/Blocks/Stays/Soonest/index.tsx b/components/MyPages/Blocks/Stays/Soonest/index.tsx
index 4c6a62a71..36b65deb5 100644
--- a/components/MyPages/Blocks/Stays/Soonest/index.tsx
+++ b/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"
 
diff --git a/components/MyPages/Blocks/Stays/Upcoming/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/index.tsx
index d3236951b..7a02b51d8 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/index.tsx
+++ b/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"