feat: static my stays

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

@@ -0,0 +1,29 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
+import Header from "../Header"
+import StayList from "../StayList"
+
+import styles from "./upcoming.module.css"
+
+import type { LangParams } from "@/types/params"
+
+export default async function UpcomingStays({ lang }: LangParams) {
+  const stays = await serverClient().user.stays.upcoming()
+
+  return (
+    <section className={styles.container}>
+      <Header
+        title="Your 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>
+      {stays.length ? (
+        <StayList lang={lang} stays={stays} />
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+    </section>
+  )
+}

components/MyPages/Blocks/Stays/Upcoming/upcoming.module.css

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