64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { ChevronDown, Minus } from "react-feather"
|
|
|
|
import CheckCircle from "@/components/Icons/CheckCircle"
|
|
import Title from "@/components/TempDesignSystem/Title"
|
|
|
|
import styles from "./benefitCard.module.css"
|
|
|
|
import {
|
|
BenefitCardProps,
|
|
BenefitValueProps,
|
|
} from "@/types/components/loyalty/blocks"
|
|
|
|
function BenefitValue({ benefit }: BenefitValueProps) {
|
|
if (!benefit.unlocked) {
|
|
return <Minus />
|
|
}
|
|
if (!benefit.value) {
|
|
return <CheckCircle height={32} width={32} />
|
|
}
|
|
return (
|
|
<div className={styles.benefitValueContainer}>
|
|
<span className={styles.benefitValue}>{benefit.value}</span>
|
|
{benefit.valueDetails && (
|
|
<span className={styles.benefitValueDetails}>
|
|
{benefit.valueDetails}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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" className={styles.benefitCardTitle}>
|
|
{title}
|
|
</Title>
|
|
<span className={styles.chevron}>
|
|
<ChevronDown />
|
|
</span>
|
|
</hgroup>
|
|
</summary>
|
|
<p className={styles.benefitCardDescription}>{description}</p>
|
|
</details>
|
|
</div>
|
|
<div className={styles.benefitComparison}>
|
|
{comparedValues.map((benefit, idx) => (
|
|
<div key={idx} className={styles.comparisonItem}>
|
|
<BenefitValue benefit={benefit} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|