first commit

src/widgets/currency-converter/ui/CommissionTable.tsx

@@ -0,0 +1,34 @@
+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>
+  )
+}