Tristan Yang
63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import { FC, ImgHTMLAttributes, useState } 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
|
|
}) => {
|
|
const [error, setError] = useState(false);
|
|
const handleError = () => {
|
|
setError(true);
|
|
};
|
|
if (!error && src) {
|
|
return <img width={width} height={height} src={src} onError={handleError} {...rest} />;
|
|
}
|
|
// 长度限制在六个字符
|
|
let initials = getInitials(name).substring(0, 6);
|
|
const len = initials.length;
|
|
const scaleVal = len > 2 ? (11 - len) / 10 : 1;
|
|
return (
|
|
<div
|
|
className={`rounded-full flex-center ${rest.className || ""}`}
|
|
style={{
|
|
|
|
width,
|
|
height,
|
|
fontSize: getFontSize(width),
|
|
fontWeight: 400,
|
|
fontFamily: "'Lato', 'Lato-Regular', 'Helvetica Neue'",
|
|
background: type === "channel" ? "#EAECF0" : "#4c99e9",
|
|
color: type === "channel" ? "#475467" : "#FFFFFF"
|
|
}}
|
|
>
|
|
<span className="whitespace-nowrap" style={{ transform: `scale(${scaleVal})` }}>{initials}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Avatar;
|