feat: add SoonestStays

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -0,0 +1,25 @@
+.button {
+  background-color: var(--some-red-color, #ed2027);
+}
+
+.link {
+  text-decoration: none;
+}
+
+.grayTitle {
+  color: var(--some-grey-color, #727272);
+  display: block;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 25rem;
+  gap: 2.5rem;
+  background-color: var(--some-grey-color, #f2f2f2);
+  border-radius: 0.8rem;
+  margin-bottom: 0.5rem;
+  padding: 0 2rem;
+}

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link"
+
+import { _ } from "@/lib/translation"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Title from "@/components/Title"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default function EmptyUpcomingStaysBlock() {
+  return (
+    <section className={styles.container}>
+      <Title level="h3" as="h5" uppercase>
+        {_(" You have no upcoming stays.")}
+        <span className={styles.grayTitle}>
+          {" "}
+          {_("Where should you go next?")}
+        </span>
+      </Title>
+      <Button intent="primary" bgcolor="quarternary" asChild type="button">
+        <Link className={styles.link} href={"#"} key="getInspired">
+          {_("Get inspired")}
+        </Link>
+      </Button>
+    </section>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { Lang } from "@/constants/languages"
+import { serverClient } from "@/lib/trpc/server"
+
+import Header from "../Header"
+import StayList from "../StayList"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import styles from "./soonest.module.css"
+
+type UpcomingStaysProps = {
+  lang: Lang
+  title: string
+  subtitle?: string
+  link: { text: string; href: string } | null
+}
+
+export default async function UpcomingStays({
+  lang,
+  title,
+  subtitle,
+  link,
+}: UpcomingStaysProps) {
+  const stays = await serverClient().user.stays.soonestUpcoming()
+
+  return (
+    <section className={styles.container}>
+      <Header title={title} subtitle={subtitle} link={link}></Header>
+      {stays.length ? (
+        <StayList lang={lang} stays={stays} />
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+    </section>
+  )
+}

components/MyPages/Blocks/Stays/Soonest/soonest.module.css

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