81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import { ChevronDown } from "react-feather"
|
|
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getHighestLevel } from "@/utils/loyaltyTable"
|
|
|
|
import BenefitValue from "../BenefitValue"
|
|
import DesktopHeader from "./DesktopHeader"
|
|
|
|
import styles from "./largeTable.module.css"
|
|
|
|
import {
|
|
BenefitTableHeaderProps,
|
|
LargeTableProps,
|
|
} from "@/types/components/loyalty/blocks"
|
|
|
|
export default function LargeTable({
|
|
levels,
|
|
activeLevel,
|
|
Select,
|
|
}: LargeTableProps) {
|
|
const highestLevel = getHighestLevel(levels)
|
|
return (
|
|
<table className={styles.table}>
|
|
<DesktopHeader
|
|
levels={levels}
|
|
activeLevel={activeLevel}
|
|
Select={Select}
|
|
/>
|
|
<tbody className={styles.tbody}>
|
|
{highestLevel?.benefits
|
|
.filter((benefit) => benefit.unlocked)
|
|
.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, idx) => {
|
|
return (
|
|
<td key={"icon" + level.level + idx} className={styles.td}>
|
|
<BenefitValue benefit={level.benefits[index]} />
|
|
</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>
|
|
)
|
|
}
|