99 lines
3.0 KiB
React
99 lines
3.0 KiB
React
|
/**
|
||
|
|
* This file is part of the SplendidBear Websites' projects.
|
||
|
|
*
|
||
|
|
* Copyright (c) 2026 @ www.splendidbear.org
|
||
|
|
*
|
||
|
|
* For the full copyright and license information, please view the LICENSE
|
||
|
|
* file that was distributed with this source code.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
export default function Avatar({ name, color, avatarUrl, bonusPoints = 0 }) {
|
||
|
|
const isRed = 'red' === color;
|
||
|
|
const initials = (name || '?').slice(0, 2).toUpperCase();
|
||
|
|
|
||
|
|
const gradient = isRed
|
||
|
|
? 'linear-gradient(135deg, rgba(173,10,5,0.6) 0%, rgba(246,125,82,0.4) 100%)'
|
||
|
|
: 'linear-gradient(135deg, rgba(35,111,135,0.6) 0%, rgba(41,128,185,0.4) 100%)';
|
||
|
|
const glow = isRed
|
||
|
|
? '0 0 0 3px rgba(173,10,5,0.2), 0 0 28px rgba(173,10,5,0.35)'
|
||
|
|
: '0 0 0 3px rgba(35,111,135,0.2), 0 0 28px rgba(35,111,135,0.35)';
|
||
|
|
const border = isRed
|
||
|
|
? 'rgba(173,10,5,0.5)'
|
||
|
|
: 'rgba(35,111,135,0.5)';
|
||
|
|
const textColor = isRed ? '#f67d52' : '#95cff5';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, position: 'relative' }}>
|
||
|
|
<div style={{ position: 'relative' }}>
|
||
|
|
<div style={{
|
||
|
|
width: 72, height: 72, borderRadius: '50%',
|
||
|
|
background: avatarUrl ? 'transparent' : gradient,
|
||
|
|
border: `2px solid ${border}`,
|
||
|
|
boxShadow: glow,
|
||
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
|
|
font: '800 24px \'Rajdhani\', sans-serif',
|
||
|
|
color: textColor,
|
||
|
|
letterSpacing: 2,
|
||
|
|
overflow: 'hidden',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{avatarUrl ? (
|
||
|
|
<img
|
||
|
|
src={avatarUrl}
|
||
|
|
alt={name}
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
objectFit: 'cover',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
initials
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{0 < bonusPoints && (
|
||
|
|
<div style={{
|
||
|
|
position: 'absolute',
|
||
|
|
bottom: -6,
|
||
|
|
right: -6,
|
||
|
|
background: '#ffd700',
|
||
|
|
borderRadius: '50%',
|
||
|
|
width: 28,
|
||
|
|
height: 28,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
boxShadow: '0 0 12px rgba(255, 215, 0, 0.6), 0 0 0 2px rgba(7, 9, 13, 1)',
|
||
|
|
border: '2px solid rgba(0,0,0,0.5)',
|
||
|
|
zIndex: 10,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<i className="fa fa-star" style={{ color: '#000', fontSize: 14 }} />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<span style={{
|
||
|
|
font: '700 15px \'Rajdhani\', sans-serif',
|
||
|
|
color: textColor,
|
||
|
|
letterSpacing: 1,
|
||
|
|
maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||
|
|
textAlign: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{name}
|
||
|
|
</span>
|
||
|
|
<span style={{
|
||
|
|
font: '600 10px \'Rajdhani\', sans-serif',
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
letterSpacing: 2,
|
||
|
|
color: 'rgba(255,255,255,0.3)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{isRed ? 'Red' : 'Blue'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|