feat: static my stays

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx

@@ -0,0 +1,17 @@
+import { serverClient } from "@/lib/trpc/server"
+import { stays } from "@/constants/routes/myPages"
+
+import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function StaysBreadcrumbs({
+  params,
+}: PageArgs<LangParams>) {
+  const href = stays[params.lang].replace(`/${params.lang}`, "")
+  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
+    href,
+    locale: params.lang,
+  })
+  return <Breadcrumbs breadcrumbs={breadcrumbs} />
+}

app/[lang]/(live)/(protected)/my-pages/overview/page.tsx

@@ -4,7 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 import MaxWidth from "@/components/MaxWidth"
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
-import UpcomingStays from "@/components/MyPages/Blocks/UpcomingStays"
+import UpcomingStays from "@/components/MyPages/Blocks/Overview/UpcomingStays"
 
 import styles from "./page.module.css"
 
@@ -12,10 +12,11 @@ import type { LangParams, PageArgs } from "@/types/params"
 
 export default async function MyPageOverview({ params }: PageArgs<LangParams>) {
   const user = await serverClient().user.get()
+
   return (
     <MaxWidth className={styles.blocks} tag="main">
       <Overview user={user} />
-      <UpcomingStays lang={params.lang} stays={user.stays} />
+      <UpcomingStays lang={params.lang} />
       <Shortcuts
         shortcuts={user.shortcuts}
         subtitle={_("The community at your fingertips")}

app/[lang]/(live)/(protected)/my-pages/stays/page.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 4.2rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  margin-top: 2rem;
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    gap: 10rem;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0;
+  }
+}

app/[lang]/(live)/(protected)/my-pages/stays/page.tsx

@@ -0,0 +1,15 @@
+import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
+import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
+
+import styles from "./page.module.css"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function MyStays({ params }: PageArgs<LangParams>) {
+  return (
+    <main className={styles.container}>
+      <UpcomingStays lang={params.lang} />
+      <PreviousStays lang={params.lang} />
+    </main>
+  )
+}