@patreon/studio/module/components/Avatar/index.jsx

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import { buildStaticUrl } from '~/utilities/build-static-url';
import { wrapResponsive } from '~/utilities/opaque-responsive';
import { classNameForResponsiveValue, createResponsiveClassNameLookup } from '~/utilities/responsive-style';
import styles from './Avatar.module.css';
const classNameSizeLookup = createResponsiveClassNameLookup(styles, {
    fluid: 'sizeFluid',
    '18px': 'sizePx18',
    '20px': 'sizePx20',
    '24px': 'sizePx24',
    '28px': 'sizePx28',
    '32px': 'sizePx32',
    '36px': 'sizePx36',
    '40px': 'sizePx40',
    '60px': 'sizePx60',
    '80px': 'sizePx80',
    '120px': 'sizePx120',
});
export function Avatar({ src = buildStaticUrl('internal/component_assets/avatar_image_default.svg'), shape = 'circle', size = '40px', alt = '', className, style, id, 'data-tag': dataTag, }) {
    const responsiveSize = wrapResponsive(size);
    const classList = cx(styles.container, {
        [styles.shapeCircle]: shape === 'circle',
        [styles.shapeSquare]: shape === 'square',
    }, classNameForResponsiveValue(responsiveSize, classNameSizeLookup), className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag ? `${dataTag}-root` : undefined}>
      <img data-tag={dataTag} className={styles.avatar} src={src} alt={alt}/>
    </div>);
}
//# sourceMappingURL=index.jsx.map