feat: add card grid component

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -1,18 +1,27 @@
+import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/Title"
+
+import HowItWorks from "./HowItWorks"
+import LoyaltyLevels from "./LoyaltyLevels"
+import OverviewTable from "./OverviewTable"
+
+import styles from "./dynamicContent.module.css"
+
+import { DynamicContentProps } from "@/types/components/loyalty/blocks"
 import {
-  DynamicContentProps,
   LoyaltyComponent,
   LoyaltyComponentEnum,
-} from "@/types/components/loyalty/blocks"
+} from "@/types/requests/loyaltyPage"
 
 function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
   switch (component) {
     case LoyaltyComponentEnum.how_it_works:
-      return <p>How it works</p>
+      return <HowItWorks />
     case LoyaltyComponentEnum.loyalty_levels:
-      return <p>loyalty_levels</p>
+      return <LoyaltyLevels />
     case LoyaltyComponentEnum.overview_table:
-      return <p>overview_table</p>
+      // TODO: IMPLEMENT OVERVIEW TABLE!
+      return <OverviewTable />
     default:
       return null
   }
@@ -21,14 +30,44 @@ function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
 export default function DynamicContent({
   dynamicContent,
 }: DynamicContentProps) {
+  const link = dynamicContent.link.pageConnection.edges.length
+    ? dynamicContent.link.pageConnection.edges[0].node.url
+    : null
   return (
-    <section>
+    <section className={styles.container}>
       <header>
-        <Title level="h3">{dynamicContent.title}</Title>
-        {dynamicContent.preamble ? <p>{dynamicContent.preamble}</p> : null}
-        {dynamicContent.link ? <></> : null}
+        <div className={styles.titleContainer}>
+          {dynamicContent.title && (
+            <Title
+              as="h3"
+              level="h2"
+              className={styles.title}
+              weight="semiBold"
+              uppercase
+            >
+              {dynamicContent.title}
+            </Title>
+          )}
+          {link && (
+            <Link className={styles.link} href={link}>
+              {dynamicContent.link.text}
+            </Link>
+          )}
+        </div>
+        {dynamicContent.subtitle && (
+          <Title
+            as="h5"
+            level="h3"
+            weight="regular"
+            className={styles.subtitle}
+          >
+            {dynamicContent.subtitle}
+          </Title>
+        )}
       </header>
-      <DynamicComponentBlock component={dynamicContent.component} />
+      <div>
+        <DynamicComponentBlock component={dynamicContent.component} />
+      </div>
     </section>
   )
 }