1import { ClipboardIcon } from '@expo/styleguide-icons';
2import { useState } from 'react';
3
4import { SnippetAction, SnippetActionProps } from '../SnippetAction';
5
6type CopyActionProps = SnippetActionProps & {
7  text: string;
8};
9
10export const CopyAction = ({ text, ...rest }: CopyActionProps) => {
11  const [copyDone, setCopyDone] = useState(false);
12  const onCopyClick = () => {
13    navigator.clipboard?.writeText(text);
14    setCopyDone(true);
15    setTimeout(() => setCopyDone(false), 1500);
16  };
17
18  return (
19    <SnippetAction
20      leftSlot={<ClipboardIcon className="icon-sm text-icon-default" />}
21      onClick={onCopyClick}
22      disabled={copyDone}
23      {...rest}>
24      {copyDone ? 'Copied!' : 'Copy'}
25    </SnippetAction>
26  );
27};
28