feat: add CardGrid and add style to StayCard

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

@@ -1,12 +1,15 @@
 "use client"
 
+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 EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -18,7 +21,7 @@ export default function PreviousStays({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const { data, isFetching, fetchNextPage, hasNextPage } =
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(
       {},
       {
@@ -37,10 +40,18 @@ export default function PreviousStays({
   return (
     <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}