mirror of
https://github.com/arc53/DocsGPT
synced 2024-11-19 21:25:39 +00:00
feat : add copy button component
This commit is contained in:
parent
5e00d4ded7
commit
889a050f25
45
frontend/src/components/CopyButton.tsx
Normal file
45
frontend/src/components/CopyButton.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { useState } from 'react';
|
||||
import Copy from './../assets/copy.svg?react';
|
||||
import CheckMark from './../assets/checkmark.svg?react';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
export default function CoppyButton({ text }: { text: string }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [isCopyHovered, setIsCopyHovered] = useState(false);
|
||||
|
||||
const handleCopyClick = (text: string) => {
|
||||
copy(text);
|
||||
setCopied(true);
|
||||
// Reset copied to false after a few seconds
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center justify-center rounded-full p-2 ${
|
||||
isCopyHovered
|
||||
? 'bg-[#EEEEEE] dark:bg-purple-taupe'
|
||||
: 'bg-[#ffffff] dark:bg-transparent'
|
||||
}`}
|
||||
>
|
||||
{copied ? (
|
||||
<CheckMark
|
||||
className="cursor-pointer stroke-green-2000"
|
||||
onMouseEnter={() => setIsCopyHovered(true)}
|
||||
onMouseLeave={() => setIsCopyHovered(false)}
|
||||
/>
|
||||
) : (
|
||||
<Copy
|
||||
className="cursor-pointer fill-none"
|
||||
onClick={() => {
|
||||
handleCopyClick(text);
|
||||
}}
|
||||
onMouseEnter={() => setIsCopyHovered(true)}
|
||||
onMouseLeave={() => setIsCopyHovered(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user