Initial Commit

src/components/buttons/icon-button/icon-button.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+
+import {IconProp} from '@fortawesome/fontawesome-svg-core';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+import {Position, Tooltip} from 'components/tooltip';
+
+import {IconButtonContainer} from './styles';
+
+interface IIconButton {
+  onClick: () => void;
+  tooltipText: string;
+  icon: IconProp;
+  className?: string;
+}
+
+const IconButton = ({onClick, tooltipText, icon, className}: IIconButton) => (
+  <Tooltip position={Position.Bottom} message={tooltipText}>
+    <IconButtonContainer className={`icon-button ${className}`} role="link" tabIndex={-11} onKeyDown={undefined} onClick={onClick}>
+      <FontAwesomeIcon icon={icon} />
+    </IconButtonContainer>
+  </Tooltip>
+);
+
+export default IconButton;

src/components/buttons/icon-button/index.tsx

@@ -0,0 +1,5 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+
+export {default} from './icon-button';

src/components/buttons/icon-button/styles.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+
+export const IconButtonContainer = styled.default.div`
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  &.icon-button {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  svg {
+    margin: 0;
+  }
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`;