extract BenefitCard component

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

@@ -0,0 +1,64 @@
+import { ChevronDown, Minus } from "react-feather"
+
+import CheckCircle from "@/components/Icons/CheckCircle"
+import Title from "@/components/Title"
+
+import styles from "./overviewTable.module.css"
+
+import {
+  BenefitCardProps,
+  BenefitValueProps,
+} from "@/types/components/loyalty/blocks"
+
+function BenefitValue({ benefit }: BenefitValueProps) {
+  if (!benefit.unlocked) {
+    return <Minus />
+  }
+  if (!benefit.value) {
+    return <CheckCircle height={32} width={32} />
+  }
+  return (
+    <div className={styles.benefitValueContainer}>
+      <span className={styles.benefitValue}>{benefit.value}</span>
+      {benefit.valueDetails && (
+        <span className={styles.benefitValueDetails}>
+          {benefit.valueDetails}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default function BenefitCard({
+  comparedValues,
+  title,
+  description,
+}: BenefitCardProps) {
+  return (
+    <div className={styles.benefitCard}>
+      <div className={styles.benefitInfo}>
+        <details className={styles.details}>
+          <summary className={styles.summary}>
+            <hgroup className={styles.benefitCardHeader}>
+              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
+                {title}
+              </Title>
+              <span className={styles.chevron}>
+                <ChevronDown />
+              </span>
+            </hgroup>
+          </summary>
+          <p className={styles.benefitCardDescription}>{description}</p>
+        </details>
+      </div>
+      <div className={styles.benefitComparison}>
+        <div className={styles.comparisonItem}>
+          <BenefitValue benefit={comparedValues.a} />
+        </div>
+        <div className={styles.comparisonItem}>
+          <BenefitValue benefit={comparedValues.b} />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -1,25 +1,21 @@
 "use client"
 
-import { Fragment, useState } from "react"
+import { Dispatch, Fragment, SetStateAction, useState } from "react"
 import { type Key } from "react-aria-components"
-import { Minus } from "react-feather"
 
 import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
 
-import CheckCircle from "@/components/Icons/CheckCircle"
-import ChevronDown from "@/components/Icons/ChevronDown"
 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 styles from "./overviewTable.module.css"
 
 import {
-  BenefitCardProps,
-  BenefitValueProps,
   ComparisonLevel,
   LevelSummaryProps,
   OverviewTableTitleProps,
@@ -115,18 +111,14 @@ export default function OverviewTable() {
   const [selectedLevelA, setSelectedLevelA] = useState(getLevelByTier(1))
   const [selectedLevelB, setSelectedLevelB] = useState(getLevelByTier(2))
 
-  // TODO Come up with a nice wat to make these two a single reusable function
+  function handleSelectChange(
-  function handleSelectChangeA(key: Key) {
+    callback: Dispatch<SetStateAction<ComparisonLevel>>
-    if (typeof key === "number") {
+  ) {
-      const level = getLevelByTier(key)
+    return (key: Key) => {
-      setSelectedLevelA(level)
+      if (typeof key === "number") {
-    }
+        const level = getLevelByTier(key)
-  }
+        callback(level)
-
+      }
-  function handleSelectChangeB(key: Key) {
-    if (typeof key === "number") {
-      const level = getLevelByTier(key)
-      setSelectedLevelB(level)
     }
   }
 
@@ -157,7 +149,7 @@ export default function OverviewTable() {
               label={"Level"}
               items={levelOptions}
               defaultSelectedKey={selectedLevelA.tier}
-              onSelect={handleSelectChangeA}
+              onSelect={handleSelectChange(setSelectedLevelA)}
             />
             <LevelSummary
               level={
@@ -173,7 +165,7 @@ export default function OverviewTable() {
               label={"Level"}
               items={levelOptions}
               defaultSelectedKey={selectedLevelB.tier}
-              onSelect={handleSelectChangeB}
+              onSelect={handleSelectChange(setSelectedLevelB)}
             />
             <LevelSummary
               level={
@@ -199,52 +191,3 @@ function LevelSummary({ level }: LevelSummaryProps) {
     </div>
   )
 }
-
-function BenefitCard({ comparedValues, title, description }: BenefitCardProps) {
-  return (
-    <div className={styles.benefitCard}>
-      <div className={styles.benefitInfo}>
-        <details className={styles.details}>
-          <summary className={styles.summary}>
-            <hgroup className={styles.benefitCardHeader}>
-              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
-                {title}
-              </Title>
-              <span className={styles.chevron}>
-                <ChevronDown />
-              </span>
-            </hgroup>
-          </summary>
-          <p className={styles.benefitCardDescription}>{description}</p>
-        </details>
-      </div>
-      <div className={styles.benefitComparison}>
-        <div className={styles.comparisonItem}>
-          <BenefitValue benefit={comparedValues.a} />
-        </div>
-        <div className={styles.comparisonItem}>
-          <BenefitValue benefit={comparedValues.b} />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function BenefitValue({ benefit }: BenefitValueProps) {
-  if (!benefit.unlocked) {
-    return <Minus />
-  }
-  if (!benefit.value) {
-    return <CheckCircle height={32} width={32} />
-  }
-  return (
-    <div className={styles.benefitValueContainer}>
-      <span className={styles.benefitValue}>{benefit.value}</span>
-      {benefit.valueDetails && (
-        <span className={styles.benefitValueDetails}>
-          {benefit.valueDetails}
-        </span>
-      )}
-    </div>
-  )
-}