- import * as React from 'react';
- import { tailwind } from '@tesseract-design/web-base';
-
- const { tw } = tailwind;
-
- const BadgeDerivedElementComponent = 'span' as const;
-
- /**
- * Derived HTML element of the {@link Badge} component.
- */
- export type BadgeDerivedElement = HTMLElementTagNameMap[
- typeof BadgeDerivedElementComponent
- ];
-
- /**
- * Props of the {@link Badge} component.
- */
- export interface BadgeProps extends React.HTMLProps<BadgeDerivedElement> {
- /**
- * Is the component rounded?
- */
- rounded?: boolean;
- }
-
- /**
- * Component for displaying textual information in a small container.
- */
- export const Badge = React.forwardRef<BadgeDerivedElement, BadgeProps>((
- {
- children,
- rounded = false,
- className,
- style,
- ...etcProps
- },
- forwardedRef,
- ) => (
- <BadgeDerivedElementComponent
- {...etcProps}
- ref={forwardedRef}
- className={tw(
- 'relative h-6 min-w-6 inline-flex align-middle items-center justify-center text-xs font-bold overflow-hidden font-semi-expanded',
- 'before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-current before:opacity-25',
- {
- 'rounded-full px-2': rounded,
- 'rounded px-1': !rounded,
- },
- className,
- )}
- style={style}
- data-testid="badge"
- >
- <span className="relative w-full">
- {children}
- </span>
- </BadgeDerivedElementComponent>
- ));
-
- Badge.displayName = 'Badge';
-
- Badge.defaultProps = {
- rounded: false,
- };
|