feat: add SoonestStays

components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css

@@ -3,6 +3,10 @@
   gap: 4px;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+}
 .title {
   font-weight: 600;
 }
@@ -11,7 +15,7 @@
   color: var(--some-red-color, #ed2027);
 }
 
-.subtitle {
+.cardSubtitle {
   font-family: var(--ff-fira-sans);
   font-size: 12px;
   font-weight: 400;

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

@@ -8,12 +8,14 @@ import styles from "./current.module.css"
 
 export type CurrentLevelProps = {
   title: string
-  preamble?: string
+  subtitle?: string
+  link: { text: string; href: string } | null
 }
 
 export default async function CurrentBenefitsBlock({
   title,
-  preamble,
+  subtitle,
+  link,
 }: CurrentLevelProps) {
   const benefits = await serverClient().user.benefits.current()
 
@@ -23,8 +25,13 @@ export default async function CurrentBenefitsBlock({
         <Title as="h4" level="h2" className={styles.title} uppercase>
           {title}
         </Title>
-        {preamble && <p className={styles.preamble}>{preamble}</p>}
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
       </header>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
 
       <div className={styles.cardContainer}>
         {benefits.map((benefit) => (
@@ -33,7 +40,7 @@ export default async function CurrentBenefitsBlock({
               <span className={styles.value}>{benefit.value}</span>{" "}
               {benefit.explanation}
             </Title>
-            <p className={styles.subtitle}>{benefit.subtitle}</p>
+            <p className={styles.cardSubtitle}>{benefit.subtitle}</p>
           </Link>
         ))}
       </div>