add LargeTable component

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

@@ -0,0 +1,26 @@
+import Image from "@/components/Image"
+
+import { LargeTableProps } from "@/types/components/loyalty/blocks"
+
+export default function LargeTable({ levels }: LargeTableProps) {
+  return (
+    <table>
+      <thead>
+        <th />
+        {levels.map((level) => {
+          console.log({ level })
+          return (
+            <th key={level.tier}>
+              <Image
+                src={level.icon}
+                alt={level.name}
+                width={140}
+                height={54}
+              />
+            </th>
+          )
+        })}
+      </thead>
+    </table>
+  )
+}

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

@@ -10,6 +10,7 @@ import Select from "@/components/TempDesignSystem/Form/Select"
 
 import levelsData from "./data/EN.json"
 import BenefitList from "./BenefitList"
+import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
 import OverviewTableTitle from "./Title"
 
@@ -178,6 +179,10 @@ export default function OverviewTable() {
           levels={[selectedLevelA, selectedLevelB, selectedLevelC]}
         />
       </div>
+      <div className={styles.largeTableContainer}>
+        {/* Remove `as` once we have real data */}
+        <LargeTable levels={levelsData.levels as ComparisonLevel[]} />
+      </div>
     </div>
   )
 }

components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css

@@ -25,6 +25,10 @@
   margin: 0;
 }
 
+.largeTableContainer {
+  display: none;
+}
+
 .columns {
   display: none;
   position: relative;
@@ -95,3 +99,13 @@
     margin: 0 calc(var(--Spacing-x2) * -1);
   }
 }
+
+@media screen and (min-width: 1367px) {
+  .columns {
+    display: none;
+  }
+
+  .largeTableContainer {
+    display: block;
+  }
+}