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

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

@@ -0,0 +1,66 @@
+'use client';
+import { Dispatch, FC, RefObject, SetStateAction } from 'react';
+import styles from '@/components/ui/modal-exchange/ModalExchange.module.css';
+import ModalExchangeContent from '@/components/ui/modal-exchange/ModalExchangeContent';
+import { useModalStore } from '@/store/modal.state';
+
+interface IModalExchange {
+    isOpen: boolean;
+    isClosing: boolean;
+    amount: number;
+    balance: number | undefined;
+    nickname: string;
+    rangeRef: RefObject<HTMLInputElement>;
+    setNickname: Dispatch<SetStateAction<string>>;
+    setAmount: Dispatch<SetStateAction<number>>;
+    onClose: () => void;
+    handleCreateExchange: (amount: number, total: number, nickname: string) => Promise<void>;
+}
+
+const ModalExchange: FC<IModalExchange> = ({
+    isOpen,
+    isClosing,
+    amount,
+    balance,
+    nickname,
+    rangeRef,
+    onClose,
+    setNickname,
+    setAmount,
+    handleCreateExchange,
+}) => {
+    const { priceItem, image, isDecimal } = useModalStore();
+    return (
+        <div
+            className={`${styles.modal} ${isOpen ? styles.isOpen : ''} ${isClosing ? styles.isClosing : ''}`}
+        >
+            <div
+                className={`${styles.modalContent} ${isOpen ? styles.isOpen : ''} ${isClosing ? styles.isClosing : ''}`}
+            >
+                <div className={styles.closeButton} onClick={onClose} />
+                <div className={styles.modalTitle}>
+                    <span>Обмен</span>
+                </div>
+                <ModalExchangeContent
+                    isDecimal={isDecimal}
+                    balance={balance}
+                    nickname={nickname}
+                    amount={amount}
+                    image={image}
+                    priceItem={priceItem}
+                    rangeRef={rangeRef}
+                    setNickname={setNickname}
+                    setAmount={setAmount}
+                />
+                <button
+                    className={styles.submitButton}
+                    onClick={() => handleCreateExchange(amount, amount / +priceItem, nickname)}
+                >
+                    Вывод
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default ModalExchange;