61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
'use client';
|
||
|
||
import React from 'react';
|
||
import { Box, VStack, Text, Progress, Heading, useColorModeValue } from '@chakra-ui/react';
|
||
import { Achievement } from '../types/user';
|
||
|
||
interface UserProfileProps {
|
||
username: string;
|
||
level: number;
|
||
experience: number;
|
||
balance: number;
|
||
achievements: Achievement[];
|
||
}
|
||
|
||
export const UserProfile: React.FC<UserProfileProps> = ({ username, level, experience, balance, achievements }) => {
|
||
const bgColor = useColorModeValue('white', 'gray.800');
|
||
const borderColor = useColorModeValue('gray.200', 'gray.700');
|
||
|
||
return (
|
||
<Box
|
||
p={6}
|
||
bg={bgColor}
|
||
borderRadius="lg"
|
||
borderWidth="1px"
|
||
borderColor={borderColor}
|
||
shadow="sm"
|
||
>
|
||
<VStack spacing={4} align="stretch">
|
||
<Heading size="md">{username}</Heading>
|
||
|
||
<Box>
|
||
<Text fontWeight="bold">Уровень {level}</Text>
|
||
<Progress value={experience} max={100} colorScheme="green" />
|
||
</Box>
|
||
|
||
<Box>
|
||
<Text fontWeight="bold">Баланс</Text>
|
||
<Text fontSize="2xl">{balance} 🔥</Text>
|
||
</Box>
|
||
|
||
<Box>
|
||
<Text fontWeight="bold" mb={2}>Достижения</Text>
|
||
<VStack align="stretch" spacing={2}>
|
||
{achievements.map((achievement) => (
|
||
<Box
|
||
key={achievement.id}
|
||
p={2}
|
||
borderRadius="md"
|
||
borderWidth="1px"
|
||
borderColor={borderColor}
|
||
>
|
||
<Text>{achievement.name}</Text>
|
||
<Text fontSize="sm" color="gray.500">{achievement.description}</Text>
|
||
</Box>
|
||
))}
|
||
</VStack>
|
||
</Box>
|
||
</VStack>
|
||
</Box>
|
||
);
|
||
};
|