Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile panel

Browse Source
This commit is contained in:
Kieran
2023-05-15 11:53:03 +01:00
parent 663c2ea433
commit d5d299a5cf
5 changed files with 55 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/app/src/Element/Avatar.tsx
View File

@ -6,13 +6,18 @@ import type { UserMetadata } from "@snort/nostr";
import useImgProxy from "Hooks/useImgProxy";
const Avatar = ({ user, ...rest }: { user?: UserMetadata; onClick?: () => void }) => {
interface AvatarProps {
user?: UserMetadata;
onClick?: () => void;
size?: number;
}
const Avatar = ({ user, size, onClick }: AvatarProps) => {
const [url, setUrl] = useState<string>(Nostrich);
const { proxy } = useImgProxy();
useEffect(() => {
if (user?.picture) {
const url = proxy(user.picture, 120);
const url = proxy(user.picture, size ?? 120);
setUrl(url);
}
}, [user]);
@ -20,7 +25,7 @@ const Avatar = ({ user, ...rest }: { user?: UserMetadata; onClick?: () => void }
const backgroundImage = `url(${url})`;
const style = { "--img-url": backgroundImage } as CSSProperties;
const domain = user?.nip05 && user.nip05.split("@")[1];
return <div {...rest} style={style} className="avatar" data-domain={domain?.toLowerCase()}></div>;
return <div onClick={onClick} style={style} className="avatar" data-domain={domain?.toLowerCase()}></div>;
};
export default Avatar;