53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
/**
|
|
* Чисто презентационный аватар: картинка по url или инициал ника как заглушка.
|
|
* Используется и в своём, и в чужом профиле, и в списках (общий примитив без логики).
|
|
*/
|
|
export function Avatar({
|
|
url,
|
|
nickname,
|
|
size = 40,
|
|
}: {
|
|
url?: string | null;
|
|
nickname: string;
|
|
size?: number;
|
|
}) {
|
|
const box: CSSProperties = {
|
|
width: size,
|
|
height: size,
|
|
borderRadius: "50%",
|
|
flexShrink: 0,
|
|
};
|
|
if (url) {
|
|
return (
|
|
<img
|
|
src={url}
|
|
alt={nickname}
|
|
width={size}
|
|
height={size}
|
|
style={{ ...box, objectFit: "cover", border: "1px solid var(--border)" }}
|
|
/>
|
|
);
|
|
}
|
|
const initial = (nickname.trim()[0] ?? "?").toUpperCase();
|
|
return (
|
|
<div
|
|
aria-hidden
|
|
style={{
|
|
...box,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "var(--surface-2)",
|
|
border: "1px solid var(--border)",
|
|
color: "var(--text-muted)",
|
|
fontWeight: 700,
|
|
fontSize: size * 0.42,
|
|
}}
|
|
>
|
|
{initial}
|
|
</div>
|
|
);
|
|
}
|