49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { ChevronDown } from "react-feather"
|
|
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import RewardValue from "../../RewardValue"
|
|
|
|
import styles from "./rewardCard.module.css"
|
|
|
|
import type { RewardCardProps } from "@/types/components/overviewTable"
|
|
|
|
export default function RewardCard({
|
|
comparedValues,
|
|
title,
|
|
description,
|
|
}: RewardCardProps) {
|
|
return (
|
|
<div className={styles.rewardCard}>
|
|
<div className={styles.rewardInfo}>
|
|
<details className={styles.details}>
|
|
<summary className={styles.summary}>
|
|
<hgroup className={styles.rewardCardHeader}>
|
|
<Title as="h5" level="h2" textTransform={"regular"}>
|
|
{title}
|
|
</Title>
|
|
<span className={styles.chevron}>
|
|
<ChevronDown />
|
|
</span>
|
|
</hgroup>
|
|
</summary>
|
|
<p
|
|
className={styles.rewardCardDescription}
|
|
dangerouslySetInnerHTML={{ __html: description }}
|
|
/>
|
|
</details>
|
|
</div>
|
|
<div className={styles.rewardComparison}>
|
|
{comparedValues.map((reward, idx) => (
|
|
<div
|
|
key={`${reward?.reward_id}-${idx}`}
|
|
className={styles.comparisonItem}
|
|
>
|
|
<RewardValue reward={reward} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|