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>
+      )}
+    </>
   )
 }

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
@@ -11,9 +12,20 @@ import StayList from "../StayList"
 import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import type { Page } from "@/types/components/myPages/myStays/page"
-import type { LangParams } from "@/types/params"
 
-export default function PreviousStays({ lang }: LangParams) {
+type PreviousStaysProps = {
+  lang: Lang
+  title: string
+  subtitle?: string
+  link: { href: string; text: string } | null
+}
+
+export default function PreviousStays({
+  lang,
+  title,
+  subtitle,
+  link,
+}: PreviousStaysProps) {
   const { data, isFetching, fetchNextPage, hasNextPage } =
     trpc.user.stays.previous.useInfiniteQuery(
       {},
@@ -28,12 +40,8 @@ export default function PreviousStays({ lang }: LangParams) {
 
   return (
     <Container>
-      <Header
-        title={_("Previous stays")}
-        subtitle={_(
-          "Revisit your stays and rekindle those our moments together, with ease."
-        )}
-      />
+      <Header title={title} subtitle={subtitle} link={link} />
+
       {data?.pages.length ? (
         <ListContainer>
           <StayList

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -0,0 +1,25 @@
+.button {
+  background-color: var(--some-red-color, #ed2027);
+}
+
+.link {
+  text-decoration: none;
+}
+
+.grayTitle {
+  color: var(--some-grey-color, #727272);
+  display: block;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 25rem;
+  gap: 2.5rem;
+  background-color: var(--some-grey-color, #f2f2f2);
+  border-radius: 0.8rem;
+  margin-bottom: 0.5rem;
+  padding: 0 2rem;
+}

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

@@ -0,0 +1,27 @@
+import Link from "next/link"
+
+import { _ } from "@/lib/translation"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Title from "@/components/Title"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default function EmptyUpcomingStaysBlock() {
+  return (
+    <section className={styles.container}>
+      <Title level="h3" as="h5" uppercase>
+        {_(" You have no upcoming stays.")}
+        <span className={styles.grayTitle}>
+          {" "}
+          {_("Where should you go next?")}
+        </span>
+      </Title>
+      <Button intent="primary" bgcolor="quarternary" asChild type="button">
+        <Link className={styles.link} href={"#"} key="getInspired">
+          {_("Get inspired")}
+        </Link>
+      </Button>
+    </section>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { Lang } from "@/constants/languages"
+import { serverClient } from "@/lib/trpc/server"
+
+import Header from "../Header"
+import StayList from "../StayList"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import styles from "./soonest.module.css"
+
+type UpcomingStaysProps = {
+  lang: Lang
+  title: string
+  subtitle?: string
+  link: { text: string; href: string } | null
+}
+
+export default async function UpcomingStays({
+  lang,
+  title,
+  subtitle,
+  link,
+}: UpcomingStaysProps) {
+  const stays = await serverClient().user.stays.soonestUpcoming()
+
+  return (
+    <section className={styles.container}>
+      <Header title={title} subtitle={subtitle} link={link}></Header>
+      {stays.length ? (
+        <StayList lang={lang} stays={stays} />
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+    </section>
+  )
+}

components/MyPages/Blocks/Stays/Soonest/soonest.module.css

@@ -0,0 +1,3 @@
+.container {
+  max-width: var(--max-width);
+}

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
@@ -11,9 +12,20 @@ import StayList from "../StayList"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
 import type { Page } from "@/types/components/myPages/myStays/page"
-import type { LangParams } from "@/types/params"
 
-export default function UpcomingStays({ lang }: LangParams) {
+type UpcomingStaysProps = {
+  lang: Lang
+  title: string
+  subtitle?: string
+  link: { text: string; href: string } | null
+}
+
+export default function UpcomingStays({
+  lang,
+  title,
+  subtitle,
+  link,
+}: UpcomingStaysProps) {
   const { data, hasNextPage, isFetching, fetchNextPage } =
     trpc.user.stays.upcoming.useInfiniteQuery(
       {},
@@ -28,12 +40,8 @@ export default function UpcomingStays({ lang }: LangParams) {
 
   return (
     <Container>
-      <Header
-        title={_("Upcoming stays")}
-        subtitle={_(
-          "Excited about your next trip? So are we. Below are your upcoming stays with us, complete with all the details you need to make each visit perfect. Can't wait to welcome you back, friend!"
-        )}
-      />
+      <Header title={title} subtitle={subtitle} link={link} />
+
       {data?.pages.length ? (
         <ListContainer>
           <StayList