feat: add CardGrid and add style to StayCard

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -1,6 +1,7 @@
 .layout {
   --header-height: 4.5rem;
 
+  background-color: var(--Brand-Coffee-Subtle);
   display: grid;
   font-family: var(--ff-fira-sans);
   grid-template-rows: var(--header-height) auto 1fr;

app/[lang]/(live)/(protected)/my-pages/page.module.css

@@ -2,8 +2,8 @@
   display: grid;
   gap: 4.2rem;
   padding-top: 4rem;
-  padding-left: 2rem;
+  padding-left: 1.6rem;
-  padding-right: 2rem;
+  padding-right: 1.6rem;
 }
 
 @media screen and (min-width: 950px) {

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -4,6 +4,7 @@ import { Lock } from "react-feather"
 import { serverClient } from "@/lib/trpc/server"
 
 import Button from "@/components/TempDesignSystem/Button"
+import CardGrid from "@/components/TempDesignSystem/CardGrid"
 import Title from "@/components/Title"
 
 import styles from "./next.module.css"
@@ -38,7 +39,7 @@ export default async function NextLevelBenefitsBlock({
         )}
       </header>
       {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
-      <div className={styles.cardContainer}>
+      <CardGrid>
         {perks.map((perk) => (
           <article key={perk.id} className={styles.card}>
             <Button type="button" intent="secondary" disabled>
@@ -51,7 +52,7 @@ export default async function NextLevelBenefitsBlock({
             </div>
           </article>
         ))}
-      </div>
+      </CardGrid>
       <div className={styles.buttonContainer}>
         <Button intent="primary" asChild>
           <Link href="#" className={styles.buttonText}>

components/MyPages/Blocks/Overview/overview.module.css

@@ -1,5 +1,4 @@
 .container {
-  background-color: var(--some-grey-color, #f2f2f2);
   display: grid;
   gap: 1.5rem;
 }
@@ -23,11 +22,6 @@
 }
 
 @media screen and (min-width: 950px) {
-  .container {
-    background-color: var(--some-white-color, #fff);
-    gap: 1.5rem;
-  }
-
   .overview {
     background-color: var(--some-grey-color, #f2f2f2);
     border-radius: 0.8rem;

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} />
-
+      {isLoading ? <p>{_("Loading")}</p> : null}
-      {stays.length ? (
+      {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}

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

@@ -1,9 +1,10 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import MaxWidth from "@/components/MaxWidth"
+import CardGrid from "@/components/TempDesignSystem/CardGrid"
 
 import Header from "../Header"
-import StayList from "../StayList"
+import StayCard from "../StayCard"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 
 import styles from "./soonest.module.css"
@@ -22,7 +23,15 @@ export default async function SoonestStays({
     <MaxWidth className={styles.container} tag="section">
       <Header title={title} subtitle={subtitle} link={link} />
       {stays.length ? (
-        <StayList lang={lang} stays={stays} />
+        <CardGrid>
+          {stays.map((stay) => (
+            <StayCard
+              key={stay.attributes.confirmationNumber}
+              lang={lang}
+              stay={stay}
+            />
+          ))}
+        </CardGrid>
       ) : (
         <EmptyUpcomingStaysBlock />
       )}

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

@@ -1,3 +1,5 @@
+import { Calendar } from "react-feather"
+
 import { dt } from "@/lib/dt"
 
 import Image from "@/components/Image"
@@ -36,21 +38,12 @@ export default function StayCard({ stay, lang }: StayCardProps) {
         >
           {hotelInformation.hotelName}
         </Title>
-        <section className={styles.container}>
+        <div className={styles.date}>
-          <div className={styles.date}>
+          <Calendar height={20} width={20} color="var(--Main-Brand-Burgundy)" />
-            <Image
+          <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-              alt="Calendar Icon"
+          {" - "}
-              height={20}
+          <time dateTime={departDateTime}>{departDate}</time>
-              src="/_static/icons/calendar_month.svg"
+        </div>
-              width={20}
-            />
-            <p>
-              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-              {" - "}
-              <time dateTime={departDateTime}>{departDate}</time>
-            </p>
-          </div>
-        </section>
       </footer>
     </article>
   )

components/MyPages/Blocks/Stays/StayCard/stay.module.css

@@ -1,12 +1,9 @@
 .stay {
-  background-color: var(--some-grey-color, #c2bdba);
+  border-radius: 0.4rem;
-  border-radius: 0.8rem;
   display: grid;
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 32rem;
-  height: 34rem;
   overflow: hidden;
+  background-color: var(--Main-Grey-White);
+  border: 1px solid #4d001b1a; /* var(--Main-Brand-Burgundy) 10% */
 }
 
 .image {
@@ -18,17 +15,13 @@
 }
 
 .footer {
-  background-color: var(--some-grey-color, #ebe8e6);
+  color: var(--Main-Brand-Burgundy);
-  border-bottom: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  padding: 1.6rem;
-  border-left: 0.1rem solid var(--some-grey-color, #d9d9d9);
-  border-right: 0.1rem solid var(--some-grey-color, #d9d9d9);
-  border-radius: 0 0 0.8rem 0.8rem;
-  height: 12rem;
-  padding: 4rem 2.5rem;
   overflow: hidden;
   margin-top: auto;
-  text-align: center;
   width: 100%;
+  display: grid;
+  gap: 1.6rem;
 }
 
 .hotel {
@@ -39,22 +32,12 @@
   margin: 0;
 }
 
-.container {
+.date {
-  display: flex;
+  font-size: var(--typography-Caption-Regular-fontSize);
-  gap: 2rem;
+  font-weight: var(--typography-Caption-Regular-fontWeight);
-  justify-content: center;
+  line-height: var(--typography-Caption-Regular-lineHeight);
-}
 
-.date,
+  display: flex;
-.guests {
   align-items: center;
-  display: flex;
+  gap: 0.4rem;
-  gap: 0.6rem;
-  font-size: small;
-}
-
-@media screen and (min-width: 950px) {
-  .footer {
-    padding: 2rem 2.5rem;
-  }
 }

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

@@ -1,19 +0,0 @@
-import StayCard from "../StayCard"
-
-import styles from "./stayList.module.css"
-
-import { StayListProps } from "@/types/components/myPages/stays/stayList"
-
-export default function StayList({ lang, stays }: StayListProps) {
-  return (
-    <section className={styles.stays}>
-      {stays.map((stay) => (
-        <StayCard
-          key={stay.attributes.confirmationNumber}
-          stay={stay}
-          lang={lang}
-        />
-      ))}
-    </section>
-  )
-}

components/MyPages/Blocks/Stays/StayList/stayList.module.css

@@ -1,21 +0,0 @@
-.stays {
-  display: grid;
-  gap: 1.5rem;
-  grid-template-columns: auto;
-
-  /* Hide scrollbar IE and Edge */
-  -ms-overflow-style: none;
-  /* Hide Scrollbar Firefox */
-  scrollbar-width: none;
-}
-
-/* Hide Scrollbar Chrome, Safari and Opera */
-.stays::-webkit-scrollbar {
-  display: none;
-}
-
-@media screen and (min-width: 950px) {
-  .stays {
-    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-  }
-}

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}

components/TempDesignSystem/CardGrid/cardGrid.module.css

@@ -0,0 +1,53 @@
+.gridContainer {
+  display: grid;
+  gap: 1.6rem;
+}
+
+.carousel {
+  display: grid;
+  grid-auto-columns: 80dvw;
+  grid-auto-flow: column;
+  gap: 1.6rem;
+
+  margin-left: -1.6rem;
+  margin-right: -1.6rem;
+  padding-left: 1.6rem;
+
+  overflow-x: scroll;
+  scroll-padding-left: 1.6rem;
+  scroll-snap-type: x mandatory;
+
+  scrollbar-width: none;
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+}
+
+.carousel:last-child {
+  margin-right: 1.6rem;
+}
+
+.carousel > * {
+  scroll-snap-align: start;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.gridContainer::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .twoColumnGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .treeColumnGrid {
+    grid-template-columns: repeat(3, minmax(30rem, 1fr));
+  }
+
+  .carousel {
+    grid-auto-flow: unset;
+    margin: 0;
+    padding: 0;
+  }
+}

components/TempDesignSystem/CardGrid/cardGrid.ts

@@ -0,0 +1,7 @@
+import { cardGridVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface CardGridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardGridVariants> {}

components/TempDesignSystem/CardGrid/index.tsx

@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from "react"
+
+import { CardGridProps } from "./cardGrid"
+import { cardGridVariants } from "./variants"
+
+export default function CardGrid({
+  children,
+  isMobileCarousel = false,
+  className,
+}: PropsWithChildren<CardGridProps>) {
+  const amountOfChildren = React.Children.toArray(children).length
+
+  let variant: CardGridProps["variant"] = undefined
+
+  if (amountOfChildren % 3 === 0) {
+    variant = "treeColumnGrid"
+  } else if (amountOfChildren % 2 === 0) {
+    variant = "twoColumnGrid"
+  }
+
+  return (
+    <section
+      className={cardGridVariants({
+        className,
+        variant,
+        isMobileCarousel,
+      })}
+    >
+      {children}
+    </section>
+  )
+}

components/TempDesignSystem/CardGrid/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./cardGrid.module.css"
+
+export const cardGridVariants = cva(styles.gridContainer, {
+  variants: {
+    isMobileCarousel: {
+      true: styles.carousel,
+    },
+    variant: {
+      twoColumnGrid: styles.twoColumnGrid,
+      treeColumnGrid: styles.treeColumnGrid,
+    },
+  },
+})