Tristan Yang
55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { FC, ImgHTMLAttributes } from "react";
|
|
import { getInitials } from "../utils";
|
|
|
|
interface Props extends ImgHTMLAttributes<HTMLImageElement> {
|
|
// className?: string;
|
|
// alt?: string;
|
|
// src?: string;
|
|
width: number;
|
|
height: number;
|
|
name?: string;
|
|
type?: "user" | "channel";
|
|
}
|
|
|
|
function getFontSize(width: number): number {
|
|
if (width <= 16) return 8;
|
|
if (width <= 24) return 12;
|
|
if (width <= 32) return 16;
|
|
if (width <= 40) return 18;
|
|
if (width <= 56) return 22;
|
|
if (width <= 80) return 48;
|
|
return 64;
|
|
}
|
|
|
|
const Avatar: FC<Props> = ({
|
|
src = "",
|
|
name = "Deleted User",
|
|
type = "user",
|
|
width,
|
|
height,
|
|
...rest
|
|
}) => {
|
|
if (src && src.length !== 0) {
|
|
return <img src={src} {...rest} />;
|
|
} else {
|
|
return (
|
|
<div
|
|
className="rounded-full flex items-center justify-center"
|
|
style={{
|
|
width,
|
|
height,
|
|
fontSize: getFontSize(width),
|
|
fontWeight: 400,
|
|
fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
|
background: type === "channel" ? "#EAECF0" : "#4c99e9",
|
|
color: type === "channel" ? "#475467" : "#FFFFFF"
|
|
}}
|
|
>
|
|
{getInitials(name)}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default Avatar;
|