Initial commit: Tapalka monorepo (bot, front, strapi)

CMyTapper/robucks-front/components/ui/modal-exchange/ModalExchangeContent.tsx

@@ -0,0 +1,76 @@
+'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;