feat: add SoonestStays

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