verdaccio-ui/src/components/CopyToClipBoard/CopyToClipBoard.tsx

import FileCopy from '@material-ui/icons/FileCopy';
import React from 'react';
import { useTranslation } from 'react-i18next';

import { copyToClipBoardUtility } from '../../utils/cli-utils';
import Tooltip from '../../muiComponents/Tooltip';

import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';

interface Props {
  text: string;
  children?: React.ReactNode;
}

const renderText = (text: string, children: React.ReactNode): JSX.Element => {
  if (children) {
    return <ClipBoardCopyText>{children}</ClipBoardCopyText>;
  }

  return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
};

const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
  const { t } = useTranslation();
  return (
    <ClipBoardCopy>
      {renderText(text, children)}
      <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
        <CopyIcon onClick={copyToClipBoardUtility(text)}>
          <FileCopy />
        </CopyIcon>
      </Tooltip>
    </ClipBoardCopy>
  );
};

export default CopyToClipBoard;