50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { TIERS } from '@widgets/currency-converter'
|
||
import styles from './CommissionPanel.module.css'
|
||
|
||
const ru = (n: number) => n.toLocaleString('ru-RU')
|
||
|
||
interface Props {
|
||
amount: number
|
||
progress: number
|
||
commission: number
|
||
effectiveRate: number
|
||
}
|
||
|
||
export function CommissionPanel({ amount, progress, commission, effectiveRate }: Props) {
|
||
return (
|
||
<div>
|
||
<div className={styles.title}>КОМИССИЯ СЕРВИСА</div>
|
||
|
||
<div className={styles.table}>
|
||
{TIERS.map((tier, i) => (
|
||
<div
|
||
key={i}
|
||
className={styles.row}
|
||
data-active={(amount >= tier.min && amount <= tier.max) || undefined}
|
||
>
|
||
<span className={styles.range}>
|
||
{ru(tier.min)} – {ru(tier.max)} ₽
|
||
</span>
|
||
<span className={styles.pct}>{tier.pct}%</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className={styles.progressBar}>
|
||
<div className={styles.progressFill} style={{ width: `${progress}%` }} />
|
||
</div>
|
||
|
||
<div className={styles.summary}>
|
||
<span className={styles.summaryLabel}>Комиссия</span>
|
||
<span className={styles.summaryValue}>
|
||
{commission.toLocaleString('ru-RU', { maximumFractionDigits: 2 })} ₽
|
||
</span>
|
||
</div>
|
||
<div className={styles.summary}>
|
||
<span className={styles.summaryLabel}>Курс с комиссией</span>
|
||
<span className={styles.summaryValue}>{effectiveRate.toFixed(2)} ₽</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|