55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
/**
|
|
* 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, { useMemo } from 'react';
|
|
import { string } from 'prop-types';
|
|
|
|
export const Avatar = ({ name, color, avatarUrl, bonusPoints = 0 }) => {
|
|
const isRed = 'red' === color;
|
|
const initials = useMemo(() => (name || '?').slice(0, 2).toUpperCase(), [name]);
|
|
|
|
const cssVars = isRed ? {
|
|
'--bd-avatar-gradient': 'linear-gradient(135deg, rgba(173,10,5,0.6) 0%, rgba(246,125,82,0.4) 100%)',
|
|
'--bd-avatar-glow': '0 0 0 3px rgba(173,10,5,0.2), 0 0 28px rgba(173,10,5,0.35)',
|
|
'--bd-avatar-border': 'rgba(173,10,5,0.5)',
|
|
'--bd-avatar-color': '#f67d52',
|
|
} : {
|
|
'--bd-avatar-gradient': 'linear-gradient(135deg, rgba(35,111,135,0.6) 0%, rgba(41,128,185,0.4) 100%)',
|
|
'--bd-avatar-glow': '0 0 0 3px rgba(35,111,135,0.2), 0 0 28px rgba(35,111,135,0.35)',
|
|
'--bd-avatar-border': 'rgba(35,111,135,0.5)',
|
|
'--bd-avatar-color': '#95cff5',
|
|
};
|
|
|
|
return (
|
|
<div className="bd-avatar-wrap" style={cssVars}>
|
|
<div className="bd-avatar-ring-wrap">
|
|
<div className="bd-avatar-ring">
|
|
{avatarUrl
|
|
? <img src={avatarUrl} alt={name} className="bd-avatar-img" />
|
|
: initials}
|
|
</div>
|
|
{0 < bonusPoints && (
|
|
<div className="bd-avatar-bonus">
|
|
<i className="fa fa-star" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<span className="bd-avatar-name">{name}</span>
|
|
<span className="bd-avatar-side">{isRed ? 'Red' : 'Blue'}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Avatar.propTypes = {
|
|
name: string,
|
|
color: string,
|
|
avatarUrl: string,
|
|
bonusPoints: string,
|
|
};
|