feat: add SoonestStays

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

@@ -2,3 +2,17 @@
   display: grid;
   gap: 0.5rem;
 }
+
+.subtitle {
+  padding-top: 0.5rem;
+  padding-bottom: 2.5rem;
+  margin: 0;
+}
+
+@media screen and (min-width: 950px) {
+  .subtitle {
+    width: 60%;
+    padding-top: 2.5rem;
+    padding-bottom: 5rem;
+  }
+}

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

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