feat: update loyalty overview table ui

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

@@ -1,10 +1,10 @@
 import { ChevronDown } from "react-feather"
 
-import Image from "@/components/Image"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getHighestLevel } from "@/utils/loyaltyTable"
 
 import BenefitValue from "../BenefitValue"
-import LevelSummary from "../LevelSummary"
+import DesktopHeader from "./DesktopHeader"
 
 import styles from "./largeTable.module.css"
 
@@ -13,57 +13,41 @@ import {
   LargeTableProps,
 } from "@/types/components/loyalty/blocks"
 
-export default function LargeTable({ levels }: LargeTableProps) {
+export default function LargeTable({
+  levels,
+  activeLevel,
+  Select,
+}: LargeTableProps) {
+  const highestLevel = getHighestLevel(levels)
   return (
     <table className={styles.table}>
-      <thead>
-        <tr className={styles.iconRow}>
-          <th className={styles.verticalTableHeader} />
-
-          {levels.map((level) => {
+      <DesktopHeader
+        levels={levels}
+        activeLevel={activeLevel}
+        Select={Select}
+      />
+      <tbody className={styles.tbody}>
+        {highestLevel?.benefits
+          .filter((benefit) => benefit.unlocked)
+          .map((benefit, index) => {
             return (
-              <th key={level.tier} className={styles.iconTh}>
-                <Image
-                  height={50}
-                  width={100}
-                  alt={level.name}
-                  src={level.icon}
-                />
-              </th>
+              <tr key={benefit.name} className={styles.tr}>
+                <th scope={"row"} className={styles.benefitTh}>
+                  <BenefitTableHeader
+                    name={benefit.name}
+                    description={benefit.description}
+                  />
+                </th>
+                {levels.map((level, idx) => {
+                  return (
+                    <td key={"icon" + level.level + idx} className={styles.td}>
+                      <BenefitValue benefit={level.benefits[index]} />
+                    </td>
+                  )
+                })}
+              </tr>
             )
           })}
-        </tr>
-        <tr>
-          <th />
-          {levels.map((level) => {
-            return (
-              <th key={level.tier} className={styles.summaryTh}>
-                <LevelSummary level={level} />
-              </th>
-            )
-          })}
-        </tr>
-      </thead>
-      <tbody>
-        {levels[0].benefits.map((benefit, index) => {
-          return (
-            <tr key={benefit.name} className={styles.tr}>
-              <th scope={"row"} className={styles.benefitTh}>
-                <BenefitTableHeader
-                  name={benefit.name}
-                  description={benefit.description}
-                />
-              </th>
-              {levels.map((level) => {
-                return (
-                  <td key={level.tier} className={styles.td}>
-                    <BenefitValue benefit={level.benefits[index]} />
-                  </td>
-                )
-              })}
-            </tr>
-          )
-        })}
       </tbody>
     </table>
   )