refactor: organize css

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