feat(SW-66, SW-348): search functionality and ui

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

@@ -0,0 +1,34 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+
+import ClientUpcomingStays from "./Client"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import styles from "./upcoming.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function UpcomingStays({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const initialUpcomingStays = await serverClient().user.stays.upcoming({
+    limit: 6,
+  })
+
+  return (
+    <SectionContainer className={styles.container}>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      {initialUpcomingStays?.data.length ? (
+        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}