35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { TIERS } from '../model/tiers'
|
||
import styles from './CommissionTable.module.css'
|
||
import { Tiers } from './Tiers'
|
||
|
||
interface Props {
|
||
amount: number
|
||
progress: number
|
||
commission: number
|
||
effectiveRate: number
|
||
}
|
||
|
||
export function CommissionTable({ amount, progress, commission, effectiveRate }: Props) {
|
||
return (
|
||
<div>
|
||
<div className={styles.title}>КОМИССИЯ СЕРВИСА</div>
|
||
<div className={styles.table}>
|
||
<Tiers tiers={TIERS} amount={amount} />
|
||
</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>
|
||
)
|
||
}
|