54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { ChevronDown } from "react-feather"
|
|
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import BenefitValue from "../BenefitValue"
|
|
|
|
import styles from "./benefitCard.module.css"
|
|
|
|
import type { BenefitCardProps } from "@/types/components/loyalty/blocks"
|
|
|
|
export default function BenefitCard({
|
|
comparedValues,
|
|
title,
|
|
description,
|
|
}: BenefitCardProps) {
|
|
return (
|
|
<div className={styles.benefitCard}>
|
|
<div className={styles.benefitInfo}>
|
|
<details className={styles.details}>
|
|
<summary className={styles.summary}>
|
|
<hgroup className={styles.benefitCardHeader}>
|
|
<Title
|
|
as="h5"
|
|
level="h2"
|
|
textTransform={"regular"}
|
|
className={styles.benefitCardTitle}
|
|
>
|
|
{title}
|
|
</Title>
|
|
<span className={styles.chevron}>
|
|
<ChevronDown />
|
|
</span>
|
|
</hgroup>
|
|
</summary>
|
|
<p
|
|
className={styles.benefitCardDescription}
|
|
dangerouslySetInnerHTML={{ __html: description }}
|
|
/>
|
|
</details>
|
|
</div>
|
|
<div className={styles.benefitComparison}>
|
|
{comparedValues.map((benefit, idx) => (
|
|
<div
|
|
key={`${benefit.valueDetails}-${idx}`}
|
|
className={styles.comparisonItem}
|
|
>
|
|
<BenefitValue benefit={benefit} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|