2023-01-16 17:31:17 +00:00
|
|
|
import "./Avatar.css";
|
2023-07-27 13:12:34 +00:00
|
|
|
import Nostrich from "nostrich.webp";
|
2023-03-03 14:30:31 +00:00
|
|
|
|
2023-01-31 14:41:21 +00:00
|
|
|
import { CSSProperties, useEffect, useState } from "react";
|
2023-06-08 10:45:23 +00:00
|
|
|
import type { UserMetadata } from "@snort/system";
|
2023-03-03 14:30:31 +00:00
|
|
|
|
2023-02-14 16:10:03 +00:00
|
|
|
import useImgProxy from "Hooks/useImgProxy";
|
2023-01-16 17:31:17 +00:00
|
|
|
|
2023-05-15 10:53:03 +00:00
|
|
|
interface AvatarProps {
|
|
|
|
user?: UserMetadata;
|
|
|
|
onClick?: () => void;
|
|
|
|
size?: number;
|
|
|
|
}
|
|
|
|
const Avatar = ({ user, size, onClick }: AvatarProps) => {
|
2023-01-31 14:41:21 +00:00
|
|
|
const [url, setUrl] = useState<string>(Nostrich);
|
|
|
|
const { proxy } = useImgProxy();
|
2023-01-16 17:31:17 +00:00
|
|
|
|
2023-01-31 14:41:21 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (user?.picture) {
|
2023-05-15 10:53:03 +00:00
|
|
|
const url = proxy(user.picture, size ?? 120);
|
2023-04-18 11:47:01 +00:00
|
|
|
setUrl(url);
|
2023-06-26 11:38:21 +00:00
|
|
|
} else {
|
|
|
|
setUrl(Nostrich);
|
2023-01-31 14:41:21 +00:00
|
|
|
}
|
|
|
|
}, [user]);
|
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const backgroundImage = `url(${url})`;
|
|
|
|
const style = { "--img-url": backgroundImage } as CSSProperties;
|
|
|
|
const domain = user?.nip05 && user.nip05.split("@")[1];
|
2023-05-15 10:53:03 +00:00
|
|
|
return <div onClick={onClick} style={style} className="avatar" data-domain={domain?.toLowerCase()}></div>;
|
2023-02-07 20:04:50 +00:00
|
|
|
};
|
2023-01-16 17:31:17 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
export default Avatar;
|