feat: update loyalty overview table ui

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

@@ -0,0 +1,63 @@
+import Image from "@/components/Image"
+
+import LevelSummary from "../../LevelSummary"
+import YourLevel from "../../YourLevelScript"
+
+import styles from "./desktopHeader.module.css"
+
+import {
+  DesktopSelectColumns,
+  LargeTableProps,
+} from "@/types/components/loyalty/blocks"
+
+export default function DesktopHeader({
+  levels,
+  activeLevel,
+  Select,
+}: LargeTableProps) {
+  return (
+    <thead>
+      <tr className={styles.iconRow}>
+        <th className={styles.verticalTableHeader} />
+        {levels.map((level, idx) => {
+          return (
+            <th key={"image" + level.level + idx} className={styles.iconTh}>
+              {activeLevel === level.level ? <YourLevel /> : null}
+              <Image
+                height={50}
+                width={100}
+                alt={level.name}
+                src={level.icon}
+              />
+            </th>
+          )
+        })}
+      </tr>
+      <tr>
+        <th />
+        {levels.map((level, idx) => {
+          return (
+            <th
+              key={"summary" + level.level + idx}
+              className={styles.summaryTh}
+            >
+              <LevelSummary level={level} />
+            </th>
+          )
+        })}
+      </tr>
+      {Select && (
+        <tr>
+          <th />
+          {["A", "B", "C"].map((column, idx) => {
+            return (
+              <th key={column + idx} className={styles.select}>
+                <Select column={column as DesktopSelectColumns["column"]} />
+              </th>
+            )
+          })}
+        </tr>
+      )}
+    </thead>
+  )
+}