avatar UserAvatar.tsx

0% Statements 0/42

0% Branches 0/1

0% Functions 0/1

0% Lines 0/42

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { css } from '@emotion/react';
import { memo, type ComponentPropsWithoutRef } from 'react';

import { Avatar } from '@allshares/studio-design-system';
import { type UserProfile } from '@amalia/tenants/users/profile/types';

import { UserAvatarAnchor } from './form/UserAvatarAnchor';
import { useUserAvatarAbilities } from './useUserAvatarAbilities';

const containerStyle = css`
  position: relative;
`;

const avatarAnchorStyle = css`
  position: absolute;
  bottom: 0;
  right: 0;
  translate: 25% 25%;
`;

export type UserAvatarProps = ComponentPropsWithoutRef<'div'> & {
  readonly user: Pick<UserProfile, 'firstName' | 'id' | 'lastName' | 'pictureURL'>;
};

export const UserAvatar = memo(function UserAvatar({ user, ...props }: UserAvatarProps) {
  const { isAvatarEditable } = useUserAvatarAbilities(user);

  return (
    <div
      css={containerStyle}
      {...props}
      data-testid="user-avatar-container"
    >
      <Avatar
        size={64}
        user={user}
      />

      {!!isAvatarEditable && <UserAvatarAnchor css={avatarAnchorStyle} />}
    </div>
  );
});