feat(SW-285): ship support for dynamic content

components/Content/Blocks/DynamicContent/OverviewTable/BenefitList/benefitList.module.css

@@ -0,0 +1,19 @@
+.benefitCardWrapper {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column: 1/3;
+  padding-top: 0;
+  margin: var(--Spacing-x1) var(--Spacing-x2);
+}
+
+.benefitCardWrapper:last-child {
+  border: none;
+}
+
+@media screen and (min-width: 950px) {
+  .benefitCardWrapper {
+    grid-column: 1/4;
+  }
+}

components/Content/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx

@@ -0,0 +1,31 @@
+import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"
+
+import BenefitCard from "../BenefitCard"
+
+import styles from "./benefitList.module.css"
+
+import type { BenefitListProps } from "@/types/components/loyalty/blocks"
+
+export default function BenefitList({ levels }: BenefitListProps) {
+  return getUnlockedBenefits(levels).map((benefit) => {
+    const levelBenefits = levels.map((level) => {
+      return findBenefit(benefit, level)
+    })
+    return (
+      <div key={benefit.name} className={styles.benefitCardWrapper}>
+        <BenefitCard
+          title={benefit.name}
+          description={benefit.description}
+          comparedValues={levelBenefits.map((benefit, idx) => {
+            return {
+              key: `${benefit.name}-${idx}`,
+              value: benefit.value,
+              unlocked: benefit.unlocked,
+              valueDetails: benefit.valueDetails,
+            }
+          })}
+        />
+      </div>
+    )
+  })
+}