refactor: organize css

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

@@ -1,25 +1,21 @@
 "use client"
 
-import { Dispatch, Fragment, SetStateAction, useState } from "react"
+import { Dispatch, SetStateAction, useState } from "react"
 import { type Key } from "react-aria-components"
 
 import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 
-import Image from "@/components/Image"
 import Select from "@/components/TempDesignSystem/Form/Select"
-import Title from "@/components/Title"
 
 import levelsData from "./data/EN.json"
-import BenefitCard from "./BenefitCard"
+import BenefitList from "./BenefitList"
+import LevelSummary from "./LevelSummary"
+import OverviewTableTitle from "./Title"
 
 import styles from "./overviewTable.module.css"
 
-import {
-  ComparisonLevel,
-  LevelSummaryProps,
-  OverviewTableTitleProps,
-} from "@/types/components/loyalty/blocks"
+import { ComparisonLevel } from "@/types/components/loyalty/blocks"
 
 // These should ultimately be fetched from Contentstack
 const titleTranslations = {
@@ -50,60 +46,12 @@ const titleTranslations = {
   ],
 }
 
-function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
-  return (
-    <Title as="h1" level="h1" weight="semiBold" uppercase>
-      {texts.map(({ text, highlight }, idx) => (
-        <Fragment key={idx}>
-          <span className={highlight ? styles.highlight : ""}>{text}</span>
-          {idx < texts.length - 1 && " "}
-        </Fragment>
-      ))}
-    </Title>
-  )
-}
-
 function getLevelByTier(tier: number) {
   return levelsData.levels.find(
     (level) => level.tier === tier
   ) as ComparisonLevel
 }
 
-function createComparison(levels: ComparisonLevel[]) {
-  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>
-      )
-    })
-}
-
 export default function OverviewTable() {
   const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
   const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
@@ -173,7 +121,7 @@ export default function OverviewTable() {
               />
             </div>
           </div>
-          {createComparison([selectedLevelA, selectedLevelB])}
+          <BenefitList levels={[selectedLevelA, selectedLevelB]} />
         </div>
         <div className={styles.columns}>
           <div className={styles.columnHeaderContainer}>
@@ -226,19 +174,11 @@ export default function OverviewTable() {
               />
             </div>
           </div>
-          {createComparison([selectedLevelA, selectedLevelB, selectedLevelC])}
+          <BenefitList
+            levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
+          />
         </div>
       </div>
     </>
   )
 }
-
-function LevelSummary({ level }: LevelSummaryProps) {
-  return (
-    <div className={styles.levelSummary}>
-      <Image src={level.icon} alt={level.name} height={50} width={100} />
-      <span className={styles.levelRequirements}>{level.requirement}</span>
-      <p className={styles.levelSummaryText}>{level.description}</p>
-    </div>
-  )
-}