117 lines
3.0 KiB
TypeScript
117 lines
3.0 KiB
TypeScript
import React from 'react';
|
||
import { Box, Typography, Avatar } from '@mui/material';
|
||
import { Star as StarIcon } from '@mui/icons-material';
|
||
|
||
interface HeaderProfileProps {
|
||
firstName: string;
|
||
lastName?: string;
|
||
avatar?: string;
|
||
starsBalance: number;
|
||
}
|
||
|
||
export const HeaderProfile: React.FC<HeaderProfileProps> = ({
|
||
firstName,
|
||
lastName,
|
||
avatar,
|
||
starsBalance,
|
||
}) => {
|
||
return (
|
||
<Box
|
||
sx={{
|
||
mb: 3,
|
||
p: 3,
|
||
background: 'linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%)',
|
||
borderRadius: 2,
|
||
border: '1px solid rgba(255, 215, 0, 0.2)',
|
||
backdropFilter: 'blur(10px)',
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
'&::before': {
|
||
content: '""',
|
||
position: 'absolute',
|
||
top: '-50%',
|
||
right: '-50%',
|
||
width: '200%',
|
||
height: '200%',
|
||
background: 'radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%)',
|
||
animation: 'pulse 4s ease-in-out infinite',
|
||
},
|
||
'@keyframes pulse': {
|
||
'0%, 100%': {
|
||
transform: 'scale(0.8)',
|
||
opacity: 0.5,
|
||
},
|
||
'50%': {
|
||
transform: 'scale(1.2)',
|
||
opacity: 0.3,
|
||
},
|
||
},
|
||
}}
|
||
>
|
||
{/* Profile info */}
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3, position: 'relative', zIndex: 1 }}>
|
||
<Avatar
|
||
src={avatar}
|
||
alt={`${firstName} ${lastName || ''}`}
|
||
sx={{
|
||
width: 64,
|
||
height: 64,
|
||
border: '3px solid #FFD700',
|
||
boxShadow: '0 4px 15px rgba(255, 215, 0, 0.3)',
|
||
'&:hover': {
|
||
transform: 'scale(1.05)',
|
||
transition: 'transform 0.3s ease',
|
||
},
|
||
}}
|
||
/>
|
||
|
||
<Box sx={{ flexGrow: 1 }}>
|
||
<Typography
|
||
variant="h4"
|
||
sx={{
|
||
color: '#FFFFFF',
|
||
fontWeight: 700,
|
||
mb: 0.5,
|
||
fontSize: 24,
|
||
lineHeight: 1.2,
|
||
}}
|
||
>
|
||
Привет, {firstName}! 👋
|
||
</Typography>
|
||
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: 1,
|
||
background: 'rgba(255, 215, 0, 0.15)',
|
||
padding: '8px 16px',
|
||
borderRadius: '50px',
|
||
border: '1px solid rgba(255, 215, 0, 0.3)',
|
||
mt: 1,
|
||
width: 'fit-content',
|
||
}}
|
||
>
|
||
<StarIcon
|
||
sx={{
|
||
color: '#FFD700',
|
||
fontSize: 24,
|
||
animation: 'starPulse 2s ease-in-out infinite',
|
||
}}
|
||
/>
|
||
<Typography
|
||
variant="h6"
|
||
sx={{
|
||
color: '#FFD700',
|
||
fontWeight: 700,
|
||
fontSize: 20,
|
||
}}
|
||
>
|
||
{starsBalance.toLocaleString()}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}; |