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

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

@@ -0,0 +1,38 @@
+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 Grids from "@/components/TempDesignSystem/Grids"
+
+import StayCard from "../StayCard"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function SoonestStays({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const upcomingStays = await serverClient().user.stays.upcoming({ limit: 3 })
+  if (!upcomingStays?.data) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      {upcomingStays.data.length ? (
+        <Grids.Stackable>
+          {upcomingStays.data.map((stay) => (
+            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+          ))}
+        </Grids.Stackable>
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}