45 lines
852 B
TypeScript
45 lines
852 B
TypeScript
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||
import { cx } from '../utils';
|
||
|
||
type BadgeVariant = 'lime' | 'ember' | 'neutral' | 'outline';
|
||
|
||
export const Badge = ({
|
||
variant = 'neutral',
|
||
dot,
|
||
className,
|
||
children,
|
||
...props
|
||
}: ComponentPropsWithoutRef<'span'> & {
|
||
variant?: BadgeVariant;
|
||
dot?: boolean;
|
||
}) => (
|
||
<span
|
||
className={cx(
|
||
'modern-sk-badge',
|
||
`modern-sk-badge--${variant}`,
|
||
dot && 'modern-sk-badge--dot',
|
||
className,
|
||
)}
|
||
{...props}
|
||
>
|
||
{children}
|
||
</span>
|
||
);
|
||
|
||
export const Chip = ({
|
||
children,
|
||
onRemove,
|
||
}: {
|
||
children: ReactNode;
|
||
onRemove?: () => void;
|
||
}) => (
|
||
<span className="modern-sk-chip">
|
||
{children}
|
||
{onRemove && (
|
||
<button type="button" className="x" onClick={onRemove} aria-label="Remove">
|
||
×
|
||
</button>
|
||
)}
|
||
</span>
|
||
);
|