feat: add CardGrid and add style to StayCard

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,
+    },
+  },
+})