feat(SW-285): ship support for dynamic content

2024-09-02 20:01:48 +02:00
parent e88e4d92bf
commit 1c2a34591b
35 changed files with 5125 additions and 0 deletions
@@ -0,0 +1,77 @@
+import { ChevronDown } from "react-feather"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"
+
+import BenefitValue from "../BenefitValue"
+import DesktopHeader from "./DesktopHeader"
+
+import styles from "./largeTable.module.css"
+
+import type {
+  BenefitTableHeaderProps,
+  LargeTableProps,
+} from "@/types/components/loyalty/blocks"
+
+export default function LargeTable({
+  levels,
+  activeLevel,
+  Select,
+}: LargeTableProps) {
+  return (
+    <table className={styles.table}>
+      <DesktopHeader
+        levels={levels}
+        activeLevel={activeLevel}
+        Select={Select}
+      />
+      <tbody className={styles.tbody}>
+        {getUnlockedBenefits(levels).map((benefit) => {
+          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, idx) => {
+                return (
+                  <td key={"icon" + level.level + idx} className={styles.td}>
+                    <BenefitValue benefit={findBenefit(benefit, level)} />
+                  </td>
+                )
+              })}
+            </tr>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}
+
+function BenefitTableHeader({ name, description }: BenefitTableHeaderProps) {
+  return (
+    <details className={styles.details}>
+      <summary className={styles.summary}>
+        <hgroup className={styles.benefitHeader}>
+          <Title
+            as="h5"
+            level="h2"
+            textTransform={"regular"}
+            className={styles.benefitTitle}
+          >
+            {name}
+          </Title>
+          <span className={styles.chevron}>
+            <ChevronDown />
+          </span>
+        </hgroup>
+      </summary>
+      <p
+        className={styles.benefitDescription}
+        dangerouslySetInnerHTML={{ __html: description }}
+      />
+    </details>
+  )
+}