fix: breakout header component to blocks header

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

@@ -0,0 +1,20 @@
+.header {
+  display: grid;
+  grid-template-areas:
+    "title link"
+    "subtitle subtitle";
+  grid-template-columns: 1fr max-content;
+  gap: 1.5rem;
+}
+
+.title {
+  grid-area: title;
+}
+
+.link {
+  grid-area: link;
+}
+
+.subtitle {
+  grid-area: subtitle;
+}

components/MyPages/Blocks/Header/index.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link"
+
+import Title from "@/components/Title"
+
+import styles from "./header.module.css"
+
+import type { HeaderProps } from "@/types/components/myPages/stays/title"
+
+export default function Header({ title, subtitle, link }: HeaderProps) {
+  return (
+    <>
+      <header className={styles.header}>
+        {title && (
+          <Title
+            as="h3"
+            level="h2"
+            className={styles.title}
+            weight="medium"
+            uppercase
+          >
+            {title}
+          </Title>
+        )}
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
+        {subtitle && (
+          <Title as="h5" weight="regular" className={styles.subtitle}>
+            {subtitle}
+          </Title>
+        )}
+      </header>
+    </>
+  )
+}