chore: add load more functionality, with refactored css

components/MyPages/Blocks/Overview/UpcomingStays/index.tsx

@@ -1,10 +1,11 @@
+import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
 import Title from "@/components/MyPages/Title"
 import Link from "@/components/TempDesignSystem/Link"
 
-import EmptyUpcomingStaysBlock from "../../Stays/EmptyUpcomingStays"
 import StayCard from "../../Stays/StayCard"
+import EmptyUpcomingStaysBlock from "../../Stays/Upcoming/EmptyUpcomingStays"
 
 import styles from "./upcoming.module.css"
 
@@ -19,15 +20,15 @@ export default async function UpcomingStays({ lang }: LangParams) {
     <section className={styles.container}>
       <header className={styles.header}>
         <Title level="h2" as="h5" uppercase>
-          Your upcoming stays
+          {_("Your upcoming stays")}
         </Title>
         <Link className={styles.link} href="#">
-          See all
+          {_("See all")}
         </Link>
       </header>
-      {stays.length ? (
+      {stays.data.length ? (
         <section className={styles.stays}>
-          {stays.map((stay) => (
+          {stays.data.map((stay) => (
             <StayCard key={stay.uid} stay={stay} lang={lang} />
           ))}
         </section>