Connection chip

packages/components/src/custom/ConnectionChip/ConnectionChip.tsx

@@ -0,0 +1,56 @@
+import { ChipProps, TooltipProps } from '@mui/material';
+import React from 'react';
+import { Chip } from '../../base/Chip';
+import { Tooltip } from '../../base/Tooltip';
+
+export interface ConnectionChipProps {
+  tooltip: string;
+  tooltipPlacement?: TooltipProps['placement'];
+  variant?: ChipProps['variant'];
+  label: string;
+  icon?: React.ReactElement;
+  onClick?: () => void;
+  onDelete?: () => void;
+  style?: React.CSSProperties;
+}
+
+function ConnectionChip({
+  tooltip,
+  tooltipPlacement = 'top',
+  variant = 'filled',
+  label,
+  icon,
+  onClick,
+  onDelete,
+  style,
+  ...rest
+}: ConnectionChipProps): JSX.Element {
+  return (
+    <Tooltip title={tooltip} placement={tooltipPlacement}>
+      <Chip
+        sx={{
+          paddingY: '10px',
+          padding: '5px 6px !important',
+          color: 'black',
+          fontSize: '14px',
+          textTransform: 'uppercase',
+          fontWeight: 400,
+          height: 'unset',
+          borderRadius: '100px',
+          border: '0.5px solid #51636B',
+          background: 'white',
+          maxWidth: '230px'
+        }}
+        variant={variant}
+        label={label}
+        onClick={onClick}
+        onDelete={onDelete}
+        icon={icon}
+        style={style}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+export default ConnectionChip;

packages/components/src/custom/ConnectionChip/index.tsx

@@ -0,0 +1,3 @@
+import ConnectionChip from './ConnectionChip';
+
+export { ConnectionChip };

packages/components/src/custom/index.tsx

@@ -2,7 +2,8 @@
 import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
 import { StyledTooltip } from './Tooltip';
+import { ConnectionChip } from './ConnectionChip';
 
 export { StyledChartDialog } from './ChartDialog';
 export { StyledSearchBar } from './StyledSearchBar';
-export { StyledTooltip, useNotificationHandler, useWindowDimensions };
+export { ConnectionChip, StyledTooltip, useNotificationHandler, useWindowDimensions };