feat: add CardGrid and add style to StayCard

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

@@ -3,11 +3,13 @@
 import { _ } from "@/lib/translation"
 import { trpc } from "@/lib/trpc/client"
 
+import CardGrid from "@/components/TempDesignSystem/CardGrid"
+
 import Container from "../Container"
 import Header from "../Header"
 import ListContainer from "../ListContainer"
 import ShowMoreButton from "../ShowMoreButton"
-import StayList from "../StayList"
+import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -19,7 +21,7 @@ export default function UpcomingStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const { data, hasNextPage, isFetching, fetchNextPage } =
+  const { data, hasNextPage, isFetching, fetchNextPage, isLoading } =
     trpc.user.stays.upcoming.useInfiniteQuery(
       { limit: 6 },
       {
@@ -39,9 +41,18 @@ export default function UpcomingStays({
     <Container>
       <Header title={title} subtitle={subtitle} link={link} />
 
-      {stays.length ? (
+      {isLoading ? <p>{_("Loading")}</p> : null}
+      {stays.length && !isLoading ? (
         <ListContainer>
-          <StayList lang={lang} stays={stays} />
+          <CardGrid>
+            {stays.map((stay) => (
+              <StayCard
+                key={stay.attributes.confirmationNumber}
+                lang={lang}
+                stay={stay}
+              />
+            ))}
+          </CardGrid>
           {hasNextPage ? (
             <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
           ) : null}