refactor: breakout section header

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

@@ -1,6 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/MyPages/Blocks/Header"
+import Header from "@/components/SectionHeader"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"

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

@@ -2,7 +2,7 @@ import { Lock } from "react-feather"
 
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/MyPages/Blocks/Header"
+import Header from "@/components/SectionHeader"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"

components/MyPages/Blocks/Header/header.module.css

@@ -1,20 +0,0 @@
-.header {
-  display: grid;
-  gap: var(--Spacing-x1);
-  grid-template-columns: 1fr auto;
-}
-
-.title {
-  grid-column: 1/2;
-  grid-row: 1/2;
-}
-
-.link {
-  grid-column: 2/-1;
-  grid-row: 1/2;
-}
-
-.subtitle {
-  grid-column: 1/-1;
-  grid-row: 2;
-}

components/MyPages/Blocks/Header/index.tsx

@@ -1,32 +0,0 @@
-import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
-
-import styles from "./header.module.css"
-
-import type { HeaderProps } from "@/types/components/myPages/header"
-
-export default function Header({
-  link,
-  subtitle,
-  title,
-  topTitle = false,
-}: HeaderProps) {
-  return (
-    <header className={styles.header}>
-      <Title
-        as={topTitle ? "h2" : "h3"}
-        className={styles.title}
-        level={topTitle ? "h1" : "h2"}
-      >
-        {title}
-      </Title>
-      {link ? (
-        <Link className={styles.link} href={link.href} variant="myPage">
-          {link.text}
-        </Link>
-      ) : null}
-      <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>
-    </header>
-  )
-}

components/MyPages/Blocks/Overview/index.tsx

@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/SectionHeader"
 import Divider from "@/components/TempDesignSystem/Divider"
 
-import Header from "../Header"
 import Friend from "./Friend"
 import Stats from "./Stats"
 

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

@@ -1,6 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Header from "@/components/MyPages/Blocks/Header"
+import Header from "@/components/SectionHeader"
 import { getIntl } from "@/i18n"
 import { getMembership } from "@/utils/user"
 

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

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
 
-import Header from "@/components/MyPages/Blocks/Header"
+import Header from "@/components/SectionHeader"
 
 import styles from "./earnAndBurn.module.css"
 

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -1,9 +1,8 @@
 import { ArrowRightIcon } from "@/components/Icons"
+import Header from "@/components/SectionHeader"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
-import Header from "../Header"
-
 import styles from "./shortcuts.module.css"
 
 import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"

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

@@ -3,9 +3,9 @@
 import { trpc } from "@/lib/trpc/client"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
+import Header from "@/components/SectionHeader"
 import Grids from "@/components/TempDesignSystem/Grids"
 
-import Header from "../../Header"
 import Container from "../Container"
 import ListContainer from "../ListContainer"
 import ShowMoreButton from "../ShowMoreButton"

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

@@ -1,8 +1,8 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import Header from "@/components/SectionHeader"
 import Grids from "@/components/TempDesignSystem/Grids"
 
-import Header from "../../Header"
 import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 

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

@@ -3,9 +3,9 @@
 import { trpc } from "@/lib/trpc/client"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
+import Header from "@/components/SectionHeader"
 import Grids from "@/components/TempDesignSystem/Grids"
 
-import Header from "../../Header"
 import Container from "../Container"
 import ListContainer from "../ListContainer"
 import ShowMoreButton from "../ShowMoreButton"