sij/env.esq
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use a variable for the avatar size

Browse source
This commit is contained in:
Jorik Schellekens 2020-09-23 15:47:49 +01:00
parent ee8c860507
commit 50f51d373f
1 changed files with 41 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/Avatar.tsx
View file

@ -24,6 +24,8 @@ import logo from '../imgs/chat-icon.svg';
import './Avatar.scss'; import './Avatar.scss';
const AVATAR_SIZE = 60;
interface IProps { interface IProps {
className?: string; className?: string;
avatarUrl: string; avatarUrl: string;
@ -58,12 +60,19 @@ export const UserAvatar: React.FC<IPropsUserAvatar> = ({
user, user,
userId, userId,
}: IPropsUserAvatar) => { }: IPropsUserAvatar) => {
const [hs] = useHSs({identifier: userId}); const [hs] = useHSs({ identifier: userId });
return <Avatar return (
avatarUrl={getThumbnailURI(hs, 34, 34, user.avatar_url)} <Avatar
label={user.displayname ? user.displayname : userId} avatarUrl={getThumbnailURI(
/>; hs,
} AVATAR_SIZE,
AVATAR_SIZE,
user.avatar_url
)}
label={user.displayname ? user.displayname : userId}
/>
);
};
interface IPropsRoomAvatar { interface IPropsRoomAvatar {
room: Room; room: Room;
@ -72,12 +81,19 @@ interface IPropsRoomAvatar {
export const RoomAvatar: React.FC<IPropsRoomAvatar> = ({ export const RoomAvatar: React.FC<IPropsRoomAvatar> = ({
room, room,
}: IPropsRoomAvatar) => { }: IPropsRoomAvatar) => {
const [hs] = useHSs({identifier: room.room_id}); const [hs] = useHSs({ identifier: room.room_id });
return <Avatar return (
avatarUrl={getThumbnailURI(hs, 34, 34, room.avatar_url)} <Avatar
label={room.name || room.room_id} avatarUrl={getThumbnailURI(
/>; hs,
} AVATAR_SIZE,
AVATAR_SIZE,
room.avatar_url
)}
label={room.name || room.room_id}
/>
);
};
interface IPropsGroupAvatar { interface IPropsGroupAvatar {
group: Group; group: Group;
@ -88,11 +104,18 @@ export const GroupAvatar: React.FC<IPropsGroupAvatar> = ({
group, group,
groupId, groupId,
}: IPropsGroupAvatar) => { }: IPropsGroupAvatar) => {
const [hs] = useHSs({identifier: groupId}); const [hs] = useHSs({ identifier: groupId });
return <Avatar return (
avatarUrl={getThumbnailURI(hs, 34, 34, group.avatar_url)} <Avatar
label={group.name} avatarUrl={getThumbnailURI(
/>; hs,
} AVATAR_SIZE,
AVATAR_SIZE,
group.avatar_url
)}
label={group.name}
/>
);
};
export default Avatar; export default Avatar;