@sinchsmb/ui-kit/src/components/Avatar/styled.ts

UI kit for SinchSMB frontend

import styled from 'styled-components/macro';

import { color } from '../../theme';
import { assertUnreachable } from '../../utils/assertUnreachable';

import { AvatarColor, AvatarSize } from './constants';

export const StyledAvatar = styled.div<{
  $color: AvatarColor;
  $size: AvatarSize;
  $width: number;
  $hasInitials: boolean;
}>`
  align-items: center;
  appearance: none;
  background-color: ${(props) => {
    switch (props.$color) {
      case AvatarColor.Gray:
        return color('ref/palette/gray/100');
      case AvatarColor.Blue:
        return color('ref/palette/blue/100');
      case AvatarColor.Green:
        return color('ref/palette/green/100');
      case AvatarColor.Orange:
        return color('ref/palette/orange/100');
      case AvatarColor.Red:
        return color('ref/palette/red/100');
      /* istanbul ignore next */
      default:
        assertUnreachable(props.$color);
    }
  }};
  border-radius: 50%;
  border-style: none;
  color: ${(props) => {
    if (props.$hasInitials) {
      switch (props.$color) {
        case AvatarColor.Gray:
          return color('ref/palette/gray/700');
        case AvatarColor.Blue:
          return color('ref/palette/blue/700');
        case AvatarColor.Green:
          return color('ref/palette/green/700');
        case AvatarColor.Orange:
          return color('ref/palette/orange/700');
        case AvatarColor.Red:
          return color('ref/palette/red/700');
        /* istanbul ignore next */
        default:
          assertUnreachable(props.$color);
      }
    } else {
      switch (props.$color) {
        case AvatarColor.Gray:
          return color('ref/palette/gray/200');
        case AvatarColor.Blue:
          return color('ref/palette/blue/200');
        case AvatarColor.Green:
          return color('ref/palette/green/200');
        case AvatarColor.Orange:
          return color('ref/palette/orange/200');
        case AvatarColor.Red:
          return color('ref/palette/red/200');
        /* istanbul ignore next */
        default:
          assertUnreachable(props.$color);
      }
    }
  }};

  display: flex;
  font-size: ${(props) => {
    switch (props.$size) {
      case AvatarSize.XSmall:
        return '8px';
      case AvatarSize.Small:
        return '10px';
      case AvatarSize.Default:
        return '18px';
      case AvatarSize.Large:
        return '36px';
      /* istanbul ignore next */
      default:
        assertUnreachable(props.$size);
    }
  }};
  font-weight: 700;
  height: ${(props) => `${props.$width}px`};
  justify-content: space-around;
  line-height: 16px;
  outline: none;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  width: ${(props) => `${props.$width}px`};
`;

export const StyledImg = styled.img`
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
`;