feat(home): change layout of env tile [EE-4479] (#8061)

app/react/components/EnvironmentStatusBadgeItem.tsx

@@ -0,0 +1,48 @@
+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>
+  );
+}