degradin
54516a66e9
Исправлены экспорты компонентов: UserProfile теперь использует export default Shop теперь использует export default TransferBalance теперь использует export default Обновлены импорты в MainApp: Все компоненты теперь импортируются как дефолтные импорты Исправлены типы для безопасной работы с mongoose документами Улучшен UI компонентов: Добавлены отступы и границы Улучшена читаемость текста Добавлены информативные сообщения Исправлена обработка ошибок: Добавлены понятные сообщения об ошибках Улучшена валидация форм
87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import {
|
||
Box,
|
||
VStack,
|
||
Text,
|
||
Input,
|
||
Button,
|
||
FormControl,
|
||
FormLabel,
|
||
NumberInput,
|
||
NumberInputField,
|
||
NumberInputStepper,
|
||
NumberIncrementStepper,
|
||
NumberDecrementStepper,
|
||
} from '@chakra-ui/react';
|
||
|
||
interface TransferBalanceProps {
|
||
userBalance: number;
|
||
onTransfer: (username: string, amount: number) => Promise<void>;
|
||
}
|
||
|
||
export default function TransferBalance({ userBalance, onTransfer }: TransferBalanceProps) {
|
||
const [username, setUsername] = useState('');
|
||
const [amount, setAmount] = useState(0);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
const handleTransfer = async () => {
|
||
if (!username || amount <= 0 || amount > userBalance) {
|
||
return;
|
||
}
|
||
|
||
setIsLoading(true);
|
||
try {
|
||
await onTransfer(username, amount);
|
||
// Очищаем форму после успешного перевода
|
||
setUsername('');
|
||
setAmount(0);
|
||
} finally {
|
||
setIsLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Box w="100%" p={4} borderWidth="1px" borderRadius="lg">
|
||
<VStack spacing={4} align="stretch">
|
||
<Text fontSize="2xl">Перевод монет</Text>
|
||
<Text>Ваш баланс: {userBalance} монет</Text>
|
||
|
||
<FormControl>
|
||
<FormLabel>Имя пользователя получателя</FormLabel>
|
||
<Input
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
placeholder="Введите имя пользователя"
|
||
/>
|
||
</FormControl>
|
||
|
||
<FormControl>
|
||
<FormLabel>Сумма перевода</FormLabel>
|
||
<NumberInput
|
||
value={amount}
|
||
onChange={(_, value) => setAmount(value)}
|
||
min={1}
|
||
max={userBalance}
|
||
>
|
||
<NumberInputField />
|
||
<NumberInputStepper>
|
||
<NumberIncrementStepper />
|
||
<NumberDecrementStepper />
|
||
</NumberInputStepper>
|
||
</NumberInput>
|
||
</FormControl>
|
||
|
||
<Button
|
||
colorScheme="blue"
|
||
onClick={handleTransfer}
|
||
isLoading={isLoading}
|
||
isDisabled={!username || amount <= 0 || amount > userBalance}
|
||
>
|
||
Перевести
|
||
</Button>
|
||
</VStack>
|
||
</Box>
|
||
);
|
||
}
|