mirror of https://github.com/portainer/portainer
49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
import clsx from 'clsx';
|
||
|
|
import { AriaAttributes, PropsWithChildren } from 'react';
|
||
|
|
|
||
|
|
import { Icon, IconProps } from '@@/Icon';
|
||
|
|
|
||
|
|
export function EnvironmentStatusBadgeItem({
|
||
|
|
className,
|
||
|
|
children,
|
||
|
|
color = 'default',
|
||
|
|
icon,
|
||
|
|
...aria
|
||
|
|
}: PropsWithChildren<
|
||
|
|
{
|
||
|
|
className?: string;
|
||
|
|
color?: 'success' | 'danger' | 'default';
|
||
|
|
icon?: IconProps['icon'];
|
||
|
|
} & AriaAttributes
|
||
|
|
>) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={clsx(
|
||
|
|
'flex items-center gap-1',
|
||
|
|
'border-2 border-solid rounded',
|
||
|
|
'w-fit py-px px-1',
|
||
|
|
'text-xs font-semibold text-gray-7',
|
||
|
|
{
|
||
|
|
'border-green-3 bg-green-2': color === 'success',
|
||
|
|
'border-error-3 bg-error-2': 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-error-7': color === 'danger',
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|