33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import { ActionIcon, Button, CopyButton, MantineSize } from "@mantine/core";
|
|
import { IconCheck, IconCopy } from "@tabler/icons-react";
|
|
|
|
interface CopyButtonProps {
|
|
value: string;
|
|
caption: string;
|
|
timeout?: number;
|
|
size?: MantineSize;
|
|
fullWidth?: boolean;
|
|
onClick?: () => void;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export function CopyButtonIcon(props : CopyButtonProps) {
|
|
return (
|
|
<div onClick={props.onClick} style={{
|
|
...props.style,
|
|
width: props.fullWidth ? '100%' : undefined,
|
|
}}>
|
|
<CopyButton value={props.value} timeout={props.timeout ? props.timeout : 2000}>
|
|
{({ copied, copy }) => (
|
|
<Button fullWidth={props.fullWidth} size={props.size} variant={'light'} color={copied ? 'teal' : 'blue'} onClick={copy}>
|
|
<>
|
|
<ActionIcon component="span" color={copied ? 'teal' : 'blue'} variant="subtle" onClick={copy}>
|
|
{copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
|
|
</ActionIcon> {props.caption}
|
|
</>
|
|
</Button>
|
|
)}
|
|
</CopyButton>
|
|
</div>
|
|
)
|
|
} |