portainer/app/react/components/Code/Code.tsx

34 lines
800 B
TypeScript

import clsx from 'clsx';
import { Button } from '@@/buttons';
import { useCopy } from '@@/buttons/CopyButton/useCopy';
import styles from './Code.module.css';
interface Props {
showCopyButton?: boolean;
children: string;
}
export function Code({ children, showCopyButton }: Props) {
const { handleCopy, copiedSuccessfully } = useCopy(children);
return (
<div className={styles.root}>
<code className={styles.code}>{children}</code>
{showCopyButton && (
<Button color="link" className={styles.copyButton} onClick={handleCopy}>
<i
className={clsx(
'fa',
copiedSuccessfully ? 'fa-check green-icon' : 'fa-copy '
)}
aria-hidden="true"
/>
</Button>
)}
</div>
);
}