degradin
54516a66e9
Исправлены экспорты компонентов: UserProfile теперь использует export default Shop теперь использует export default TransferBalance теперь использует export default Обновлены импорты в MainApp: Все компоненты теперь импортируются как дефолтные импорты Исправлены типы для безопасной работы с mongoose документами Улучшен UI компонентов: Добавлены отступы и границы Улучшена читаемость текста Добавлены информативные сообщения Исправлена обработка ошибок: Добавлены понятные сообщения об ошибках Улучшена валидация форм
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
import { Box, VStack, Text, Progress, SimpleGrid, Badge } from '@chakra-ui/react';
|
||
import { IAchievement } from '../../backend/models/User';
|
||
|
||
interface UserProfileProps {
|
||
username: string;
|
||
level: number;
|
||
experience: number;
|
||
balance: number;
|
||
achievements: IAchievement[];
|
||
}
|
||
|
||
export default function UserProfile({ username, level, experience, balance, achievements }: UserProfileProps) {
|
||
// Простая формула для определения прогресса опыта
|
||
const expNeeded = level * 100;
|
||
const expProgress = (experience / expNeeded) * 100;
|
||
|
||
return (
|
||
<Box w="100%" p={4} borderWidth="1px" borderRadius="lg">
|
||
<VStack spacing={4} align="stretch">
|
||
<Text fontSize="2xl">Профиль</Text>
|
||
|
||
<Box>
|
||
<Text fontSize="lg">Имя пользователя: {username}</Text>
|
||
<Text>Уровень: {level}</Text>
|
||
<Text mb={2}>Опыт: {experience}/{expNeeded}</Text>
|
||
<Progress value={expProgress} colorScheme="green" />
|
||
</Box>
|
||
|
||
<Box>
|
||
<Text fontSize="lg">Баланс: {balance} монет</Text>
|
||
</Box>
|
||
|
||
{achievements.length > 0 && (
|
||
<Box>
|
||
<Text fontSize="lg" mb={2}>Достижения:</Text>
|
||
<SimpleGrid columns={[1, 2, 3]} spacing={4}>
|
||
{achievements.map((achievement) => (
|
||
<Badge
|
||
key={achievement.id}
|
||
p={2}
|
||
borderRadius="md"
|
||
colorScheme="purple"
|
||
variant="subtle"
|
||
>
|
||
{achievement.name}
|
||
</Badge>
|
||
))}
|
||
</SimpleGrid>
|
||
</Box>
|
||
)}
|
||
</VStack>
|
||
</Box>
|
||
);
|
||
}
|