rDrama/chat/src/features/chat/Username.tsx

36 lines
763 B
TypeScript

import React from "react";
import "./Username.css";
interface UsernameProps {
avatar: string;
color: string;
name: string;
hat?: string;
}
export function Username({ avatar, color, name, hat = "" }: UsernameProps) {
return (
<div className="Username">
<div className="profile-pic-20-wrapper">
<img alt={name} src={avatar} className="pp20" />
{hat && (
<img
className="avatar-hat profile-pic-20-hat hat"
loading="lazy"
src={hat}
/>
)}
</div>
<a
className="userlink"
style={{ color: `#${color}` }}
target="_blank"
href={`/@${name}`}
rel="noopener noreferrer"
>
{name}
</a>
</div>
);
}