94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import { ChevronDown } from "react-feather"
|
|
|
|
import Image from "@/components/Image"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import BenefitValue from "../BenefitValue"
|
|
import LevelSummary from "../LevelSummary"
|
|
|
|
import styles from "./largeTable.module.css"
|
|
|
|
import {
|
|
BenefitTableHeaderProps,
|
|
LargeTableProps,
|
|
} from "@/types/components/loyalty/blocks"
|
|
|
|
export default function LargeTable({ levels }: LargeTableProps) {
|
|
return (
|
|
<table className={styles.table}>
|
|
<thead className={styles.thead}>
|
|
<tr className={styles.iconRow}>
|
|
<th className={styles.verticalTableHeader} />
|
|
|
|
{levels.map((level) => {
|
|
return (
|
|
<th key={level.tier} className={styles.iconTh}>
|
|
<Image
|
|
height={50}
|
|
width={100}
|
|
alt={level.name}
|
|
src={level.icon}
|
|
/>
|
|
</th>
|
|
)
|
|
})}
|
|
</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>
|
|
)
|
|
}
|
|
|
|
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}>{description}</p>
|
|
</details>
|
|
)
|
|
}
|