77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
import { Dispatch, FC, RefObject, SetStateAction } from 'react';
|
||
import styles from '@/components/ui/modal-exchange/ModalExchange.module.css';
|
||
import Image from 'next/image';
|
||
import NicknameInput from '@/components/ui/modal-exchange/inputs/NicknameInput';
|
||
import RangeInput from '@/components/ui/modal-exchange/inputs/RangeInput';
|
||
import { toFixed } from '@/utils/FormatNumber';
|
||
|
||
interface IModalExchangeContent {
|
||
isDecimal: boolean;
|
||
balance: number | undefined;
|
||
nickname: string;
|
||
amount: number;
|
||
priceItem: number;
|
||
image: string;
|
||
rangeRef: RefObject<HTMLInputElement>;
|
||
setNickname: Dispatch<SetStateAction<string>>;
|
||
setAmount: Dispatch<SetStateAction<number>>;
|
||
}
|
||
|
||
const ModalExchangeContent: FC<IModalExchangeContent> = ({
|
||
isDecimal,
|
||
balance,
|
||
nickname,
|
||
amount,
|
||
priceItem,
|
||
image,
|
||
rangeRef,
|
||
setNickname,
|
||
setAmount,
|
||
}) => {
|
||
return (
|
||
<div className={styles.content}>
|
||
<div className={styles.selectAmount}>
|
||
<span className={styles.selectAmountTitle}>Выберите количество</span>
|
||
<div className={styles.amount}>
|
||
<div className={styles.selectedAmount}>
|
||
<span>{`${amount.toFixed(isDecimal ? 3 : 0)} - ${toFixed(balance)}`}</span>
|
||
<Image
|
||
src={'/icons/small-robucks-icon.svg'}
|
||
alt={'small robucks icon'}
|
||
height={18}
|
||
width={18}
|
||
/>
|
||
</div>
|
||
<RangeInput
|
||
isDecimal={isDecimal}
|
||
balance={balance}
|
||
amount={amount}
|
||
priceItem={priceItem}
|
||
rangeRef={rangeRef}
|
||
setAmount={setAmount}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<Image
|
||
src={'/icons/exchange-icon.svg'}
|
||
alt={'exchange icon'}
|
||
width={24}
|
||
height={24}
|
||
/>
|
||
</div>
|
||
<div className={styles.rate}>
|
||
{priceItem && (
|
||
<span>{isDecimal ? (amount / priceItem).toFixed(3) : amount / priceItem}</span>
|
||
)}
|
||
<Image src={image} alt={'small coin icon'} height={24} width={24} />
|
||
</div>
|
||
<NicknameInput nickname={nickname} setNickname={setNickname} />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ModalExchangeContent;
|