feat: add SoonestStays

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

@@ -10,12 +10,14 @@ import styles from "./next.module.css"
 
 export type NextLevelProps = {
   title: string
-  preamble?: string
+  subtitle?: string
+  link: { href: string; text: string } | null
 }
 
 export default async function NextLevelBenefitsBlock({
   title,
-  preamble,
+  subtitle,
+  link,
 }: NextLevelProps) {
   const { nextLevel, perks } = await serverClient().user.benefits.nextLevel()
 
@@ -24,9 +26,14 @@ export default async function NextLevelBenefitsBlock({
       <header className={styles.header}>
         <Title as="h4" level="h2" uppercase className={styles.title}>
           {title}
+          {link && (
+            <Link className={styles.link} href={link.href}>
+              {link.text}
+            </Link>
+          )}
         </Title>
-        {preamble && <p className={styles.preamble}>{preamble}</p>}
       </header>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
       <div className={styles.cardContainer}>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
@@ -36,7 +43,7 @@ export default async function NextLevelBenefitsBlock({
             </Button>
             <div>
               <span className={styles.level}>As our {nextLevel}</span>{" "}
-              <p className={styles.subtitle}>{perk.explanation}</p>
+              <p className={styles.cardSubtitle}>{perk.explanation}</p>
             </div>
           </article>
         ))}