portainer/app/react/components/StatusBadge.tsx

50 lines
1.2 KiB
TypeScript
Raw Normal View History

import clsx from 'clsx';
import { AriaAttributes, PropsWithChildren } from 'react';
import { Icon, IconProps } from '@@/Icon';
export function StatusBadge({
className,
children,
color = 'default',
icon,
...aria
}: PropsWithChildren<
{
className?: string;
color?: 'success' | 'danger' | 'warning' | 'default';
icon?: IconProps['icon'];
} & AriaAttributes
>) {
return (
<span
className={clsx(
'flex items-center gap-1 rounded',
'w-fit px-1.5 py-0.5',
'text-sm font-medium text-white',
{
' bg-success-7 th-dark:bg-success-9': color === 'success',
' bg-warning-7 th-dark:bg-warning-9': color === 'warning',
' bg-error-7 th-dark:bg-error-9': color === 'danger',
},
className
)}
// eslint-disable-next-line react/jsx-props-no-spreading
{...aria}
>
{icon && (
<Icon
icon={icon}
className={clsx({
'!text-green-7': color === 'success',
'!text-warning-7': color === 'warning',
'!text-error-7': color === 'danger',
})}
/>
)}
{children}
</span>
);
}