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/badge-wrapper/badge-wrapper.tsx
2023-07-14 13:05:00 -07:00

51 lines
1.4 KiB
TypeScript

import React from 'react';
import classnames from 'classnames';
import { Display } from '../../../helpers/constants/design-system';
import { Box } from '..';
import type { PolymorphicRef } from '../box';
import {
BadgeWrapperPosition,
BadgeWrapperAnchorElementShape,
BadgeWrapperProps,
BadgeWrapperComponent,
} from './badge-wrapper.types';
export const BadgeWrapper: BadgeWrapperComponent = React.forwardRef(
<C extends React.ElementType = 'div'>(
{
children,
badge,
badgeContainerProps,
position = BadgeWrapperPosition.topRight,
positionObj,
anchorElementShape = BadgeWrapperAnchorElementShape.circular,
className = '',
...props
}: BadgeWrapperProps<C>,
ref?: PolymorphicRef<C>,
) => (
<Box
className={classnames('mm-badge-wrapper', className)}
ref={ref}
display={Display.InlineBlock}
{...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
>
{/* 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>
),
);