overleaf/services/web/frontend/js/features/ui/components/bootstrap-5/badge.tsx
ilkin-overleaf cccd0f06d7 Merge pull request #17908 from overleaf/ii-bs5-badge
[web] Create Bootstrap 5 badges

GitOrigin-RevId: 72355c7cf7dca2a5d16bc890d7cfa4a432dd15ba
2024-04-22 08:04:07 +00:00

27 lines
783 B
TypeScript

import { Badge as BSBadge } from 'react-bootstrap-5'
import { MergeAndOverride } from '../../../../../../types/utils'
import MaterialIcon from '@/shared/components/material-icon'
type BadgeProps = MergeAndOverride<
React.ComponentProps<typeof BSBadge>,
{
prepend?: React.ReactNode
closeBtnProps?: React.ComponentProps<'button'>
}
>
function Badge({ prepend, children, closeBtnProps, ...rest }: BadgeProps) {
return (
<BSBadge {...rest}>
{prepend && <span className="badge-prepend">{prepend}</span>}
{children}
{closeBtnProps && (
<button type="button" className="badge-close" {...closeBtnProps}>
<MaterialIcon className="badge-close-icon" type="close" />
</button>
)}
</BSBadge>
)
}
export default Badge