1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/avatar-favicon/avatar-favicon.js

90 lines
2.3 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { AvatarBase } from '../avatar-base';
import Box from '../../ui/box/box';
import { IconName, Icon } from '../icon';
import {
BorderColor,
Size,
DISPLAY,
AlignItems,
JustifyContent,
IconColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
export const AvatarFavicon = ({
size = Size.MD,
src,
name = 'avatar-favicon',
className,
fallbackIconProps,
borderColor = BorderColor.transparent,
...props
}) => {
const t = useI18nContext();
return (
<AvatarBase
size={size}
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
className={classnames('mm-avatar-favicon', className)}
{...{ borderColor, ...props }}
>
{src ? (
<img
className="mm-avatar-favicon__image"
src={src}
alt={t('logo', [name])}
/>
) : (
<Icon
name={IconName.Global}
color={IconColor.iconDefault}
size={size}
{...fallbackIconProps}
/>
)}
</AvatarBase>
);
};
AvatarFavicon.propTypes = {
/**
* The src accepts the string of the image to be rendered
*/
src: PropTypes.string,
/**
* The alt text for the favicon avatar to be rendered
*/
name: PropTypes.string.isRequired,
/**
* Props for the fallback icon. All Icon props can be used
*/
fallbackIconProps: PropTypes.object,
/**
* The size of the AvatarFavicon
* Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px
* Defaults to Size.MD
*/
size: PropTypes.oneOf(Object.values(AVATAR_FAVICON_SIZES)),
/**
* The border color of the AvatarFavicon
* Defaults to Color.transparent
*/
borderColor: PropTypes.oneOf(Object.values(BorderColor)),
/**
* Additional classNames to be added to the AvatarFavicon
*/
className: PropTypes.string,
/**
* AvatarFavicon also accepts all Box props including but not limited to
* className, as(change root element of HTML element) and margin props
*/
...Box.propTypes,
};