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

33 lines
834 B
TypeScript

import { Check, Copy } from 'lucide-react';
import { Button } from '@@/buttons';
import { useCopy } from '@@/buttons/CopyButton/useCopy';
import { Icon } from '@@/Icon';
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}>
<Icon
icon={copiedSuccessfully ? Check : Copy}
className="!ml-1"
mode={copiedSuccessfully ? 'success' : undefined}
/>
</Button>
)}
</div>
);
}