86 lines
1.9 KiB
TypeScript
86 lines
1.9 KiB
TypeScript
import { Paper, useMantineTheme } from "@mantine/core";
|
|
import { Facehash } from "facehash";
|
|
|
|
interface PlayerAvatarProps {
|
|
name?: string;
|
|
size?: number;
|
|
disableFullscreen?: boolean;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const PlayerAvatar = ({
|
|
name = "",
|
|
size = 35,
|
|
disableFullscreen = false,
|
|
style,
|
|
}: PlayerAvatarProps) => {
|
|
const theme = useMantineTheme();
|
|
|
|
const getFacehashSize = (size: number): 32 | 48 | 64 | 80 => {
|
|
if (size <= 40) return 32;
|
|
if (size <= 56) return 48;
|
|
if (size <= 72) return 64;
|
|
return 80;
|
|
};
|
|
|
|
const facehashSize = getFacehashSize(size);
|
|
|
|
const colors = [
|
|
"hsla(314, 100%, 80%, 1)",
|
|
"hsla(58, 93%, 72%, 1)",
|
|
"hsla(218, 92%, 72%, 1)",
|
|
"hsla(19, 99%, 44%, 1)",
|
|
"hsla(156, 86%, 40%, 1)",
|
|
"hsla(314, 100%, 85%, 1)",
|
|
"hsla(58, 92%, 79%, 1)",
|
|
"hsla(218, 91%, 78%, 1)",
|
|
"hsla(19, 99%, 50%, 1)",
|
|
"hsla(156, 86%, 64%, 1)",
|
|
];
|
|
|
|
return (
|
|
<Paper
|
|
p={size / 20}
|
|
radius="100%"
|
|
withBorder
|
|
style={{
|
|
cursor: !disableFullscreen ? 'pointer' : 'default',
|
|
transition: 'transform 0.15s ease',
|
|
...style,
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (!disableFullscreen) {
|
|
e.currentTarget.style.transform = 'scale(1.02)';
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.transform = 'scale(1)';
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
overflow: 'hidden',
|
|
borderRadius: '100%',
|
|
}}
|
|
>
|
|
<Facehash
|
|
name={name}
|
|
size={size}
|
|
variant="solid"
|
|
colors={colors}
|
|
intensity3d="dramatic"
|
|
enableBlink
|
|
style={{ borderRadius: '100%', overflow: 'hidden', color: 'black' }}
|
|
/>
|
|
</div>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default PlayerAvatar;
|