78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import clsx from "clsx";
|
|
import Warning from "../indicators/Warning";
|
|
import Admin from "../indicators/Admin";
|
|
import Tooltip from "./Tooltip";
|
|
|
|
interface AvatarProps {
|
|
size: "small" | "medium" | "large";
|
|
status?: "caution" | "admin";
|
|
src?: string;
|
|
name?: string;
|
|
}
|
|
|
|
export default function Avatar({ size, status, src, name }: AvatarProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"rounded-full text-white relative",
|
|
size === "small" && "2xl:size-[2.222vw] size-[8.889vw] button-s",
|
|
size === "medium" && "2xl:size-[2.5vw] size-[10vw] button-m",
|
|
size === "large" && "2xl:size-[3.333vw] size-[13.333vw] title-s"
|
|
)}
|
|
>
|
|
{GetAvatarImage(src, name)}
|
|
<div
|
|
className={clsx(
|
|
"absolute",
|
|
size === "small" &&
|
|
"2xl:bottom-[1.389vw] bottom-[5.556vw] 2xl:left-[1.389vw] left-[5.556vw]",
|
|
size === "medium" &&
|
|
"2xl:bottom-[1.667vw] bottom-[6.667vw] 2xl:left-[1.667vw] left-[6.667vw]",
|
|
size === "large" &&
|
|
"2xl:bottom-[2.5vw] bottom-[10vw] 2xl:left-[2.5vw] left-[10vw]"
|
|
)}
|
|
>
|
|
{status === "caution" && (
|
|
<Tooltip label="Проблема с соединением" position="top">
|
|
<Warning type="caution" />
|
|
</Tooltip>
|
|
)}
|
|
{status === "admin" && (
|
|
<Tooltip label="Администратор" position="top">
|
|
<Admin />
|
|
</Tooltip>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GetAvatarImage(src?: string, name?: string) {
|
|
// Aninymous avatar
|
|
if (!src && !name) {
|
|
return <img src="/img/popups/MessageUserPfp.png" alt="avatar" />;
|
|
}
|
|
|
|
// Name avatar
|
|
if (name && !src) {
|
|
const nameParts = name.split(" ");
|
|
const firstLetter = nameParts[0][0].toUpperCase();
|
|
const secondLetter =
|
|
nameParts.length > 1
|
|
? nameParts[nameParts.length - 1][0].toUpperCase()
|
|
: "";
|
|
|
|
return (
|
|
<div className="bg-[#7B60F3] size-full rounded-full flex items-center justify-center">
|
|
<span className="">
|
|
{firstLetter}
|
|
{secondLetter}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Src avatar
|
|
return <img src={src} alt="avatar" />;
|
|
}
|