feat: static my stays

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

@@ -0,0 +1,38 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/MyPages/Title"
+import StayCard from "../../Stays/StayCard"
+import EmptyUpcomingStaysBlock from "../../Stays/EmptyUpcomingStays"
+
+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({
+    perPage: 3,
+  })
+
+  return (
+    <section className={styles.container}>
+      <header className={styles.header}>
+        <Title level="h2" as="h5" uppercase>
+          Your upcoming stays
+        </Title>
+        <Link className={styles.link} href="#">
+          See all
+        </Link>
+      </header>
+      {stays.length ? (
+        <section className={styles.stays}>
+          {stays.map((stay) => (
+            <StayCard key={stay.uid} stay={stay} lang={lang} />
+          ))}
+        </section>
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+    </section>
+  )
+}

components/MyPages/Blocks/Overview/UpcomingStays/upcoming.module.css

@@ -0,0 +1,54 @@
+.container {
+  display: grid;
+  gap: 2.2rem;
+  overflow: hidden;
+  margin-right: -2rem;
+}
+
+.header {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+}
+
+.link {
+  display: none;
+}
+
+.stays {
+  display: flex;
+  gap: 2rem;
+  overflow-x: auto;
+
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+  scrollbar-width: none;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.stays::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .container {
+    margin-right: 0;
+  }
+  @media screen and (max-width: 950px) {
+    .stays {
+      padding-right: 2rem;
+    }
+  }
+
+  .link {
+    color: var(--some-black-color, #111);
+    display: inline-block;
+    font-family: var(--ff-fira-sans);
+    font-size: 1.4rem;
+    font-weight: 600;
+    letter-spacing: 1.2%;
+    line-height: 140%;
+    text-decoration: none;
+  }
+}