mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import classnames from 'classnames';
|
|
|
|
import { DISPLAY } from '../../../helpers/constants/design-system';
|
|
|
|
import Box from '../../ui/box';
|
|
|
|
import {
|
|
BadgeWrapperPosition,
|
|
BadgeWrapperAnchorElementShape,
|
|
BadgeWrapperProps,
|
|
} from './badge-wrapper.types';
|
|
|
|
export const BadgeWrapper = ({
|
|
children,
|
|
badge,
|
|
badgeContainerProps,
|
|
position = BadgeWrapperPosition.topRight,
|
|
positionObj,
|
|
anchorElementShape = BadgeWrapperAnchorElementShape.circular,
|
|
className = '',
|
|
color,
|
|
...props
|
|
}: BadgeWrapperProps) => (
|
|
<Box
|
|
className={classnames('mm-badge-wrapper', className)}
|
|
display={DISPLAY.INLINE_BLOCK}
|
|
{...props}
|
|
>
|
|
{/* Generally the AvatarAccount or AvatarToken */}
|
|
{children}
|
|
<Box
|
|
className={classnames('mm-badge-wrapper__badge-container', {
|
|
[`mm-badge-wrapper__badge-container--${anchorElementShape}-${position}`]:
|
|
!positionObj,
|
|
})}
|
|
style={{ ...positionObj }}
|
|
{...badgeContainerProps}
|
|
>
|
|
{/* Generally the AvatarNetwork at SIZES.XS */}
|
|
{badge}
|
|
</Box>
|
|
</Box>
|
|
);
|