refactor: organize css

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

@@ -0,0 +1,49 @@
+.benefitCardWrapper {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column: 1/3;
+  padding: var(--Spacing-x2);
+  padding-top: 0;
+}
+
+.firstColumn {
+  background-color: var(--Main-Brand-PalePeach);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 50%;
+  z-index: 1;
+}
+
+.secondColumn {
+  background-color: var(--Base-Background-Normal);
+  position: absolute;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-bottom: calc(var(--Spacing-x2) * -1);
+  left: 50%;
+  right: 0;
+  z-index: 1;
+  border-top-left-radius: var(--Corner-radius-Medium);
+}
+
+@media screen and (min-width: 950px) {
+  .benefitCardWrapper {
+    grid-column: 1/4;
+  }
+
+  .firstColumn {
+    width: calc((100%) / 3);
+    right: calc(100% / 3 * 2);
+    margin-left: 0;
+  }
+
+  .secondColumn {
+    width: calc(100% / 3);
+    left: calc(100% / 3);
+    right: calc(100% / 3);
+  }
+}

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

@@ -0,0 +1,43 @@
+import BenefitCard from "../BenefitCard"
+
+import styles from "./benefitList.module.css"
+
+import {
+  BenefitListProps,
+  ComparisonLevel,
+} from "@/types/components/loyalty/blocks"
+
+export default function BenefitList({ levels }: BenefitListProps) {
+  const highestTier = levels.reduce(
+    (acc: ComparisonLevel | null, level: ComparisonLevel) => {
+      if (!acc) {
+        return level
+      }
+      return level.tier > acc.tier ? level : acc
+    },
+    null
+  )
+
+  return highestTier?.benefits
+    .filter((benefit) => benefit.unlocked)
+    .map((benefit, idx) => {
+      const levelBenefits = levels.map((level) => level.benefits[idx])
+      return (
+        <div key={benefit.name} className={styles.benefitCardWrapper}>
+          <div className={styles.firstColumn} />
+          <div className={styles.secondColumn} />
+          <BenefitCard
+            title={benefit.name}
+            description={benefit.description}
+            comparedValues={levelBenefits.map((benefit) => {
+              return {
+                value: benefit.value,
+                unlocked: benefit.unlocked,
+                valueDetails: benefit.valueDetails,
+              }
+            })}
+          />
+        </div>
+      )
+    })
+}