feat: add card grid component

components/Loyalty/Blocks/CardGrid/index.tsx

@@ -0,0 +1,50 @@
+import { _ } from "@/lib/translation"
+
+import Card from "@/components/TempDesignSystem/Card"
+import Title from "@/components/Title"
+
+import styles from "./cardGrid.module.css"
+
+import { CardGridProps, CardProps } from "@/types/components/loyalty/blocks"
+
+export default function CardGrid({ card_grid }: CardGridProps) {
+  return (
+    <section className={styles.container}>
+      <header className={styles.titleContainer}>
+        <Title as="h3" level="h2" weight="semiBold" uppercase>
+          {card_grid.title}
+        </Title>
+        {card_grid.subtitle ? (
+          <Title
+            as="h5"
+            level="h3"
+            weight="regular"
+            className={styles.subtitle}
+          >
+            {card_grid.subtitle}
+          </Title>
+        ) : null}
+      </header>
+      <div className={styles.cardContainer}>
+        {card_grid.cards.map((card, i) => (
+          <CardWrapper key={`${card.title}+${i}`} card={card} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+function CardWrapper({ card }: CardProps) {
+  const link = card.referenceConnection.edges.length
+    ? {
+        href: card.referenceConnection.edges[0].node.url,
+        title: _("Read more"),
+      }
+    : undefined
+
+  return (
+    <div className={styles.cardWrapper}>
+      <Card subtitle={card.subtitle} title={card.title} link={link} />
+    </div>
+  )
+}