62 lines
1.2 KiB
TypeScript
62 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
|
|
import { Button } from "./button";
|
|
import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
|
|
|
|
import { useClipboard } from "@/lib/hooks";
|
|
|
|
const CopyButton = React.forwardRef<
|
|
React.ElementRef<typeof Button>,
|
|
React.ComponentPropsWithoutRef<typeof Button> & {
|
|
valueToCopy: string;
|
|
}
|
|
>(({ className, valueToCopy, ...props }, ref) => {
|
|
const copyToClipboard = useClipboard(valueToCopy);
|
|
|
|
const [showSuccessIcon, setShowSuccessIcon] = React.useState(false);
|
|
|
|
const handleCopy = () => {
|
|
copyToClipboard();
|
|
setShowSuccessIcon(true);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
let timeout: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
if (showSuccessIcon) {
|
|
timeout = setTimeout(() => {
|
|
setShowSuccessIcon(false);
|
|
}, 5000);
|
|
}
|
|
|
|
return () => {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
};
|
|
}, [showSuccessIcon]);
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
ref={ref}
|
|
variant={"ghost"}
|
|
size={"icon"}
|
|
className={className}
|
|
onClick={handleCopy}
|
|
{...props}
|
|
>
|
|
{showSuccessIcon ? (
|
|
<CheckIcon className="size-5 text-green-500" />
|
|
) : (
|
|
<CopyIcon className="size-4" />
|
|
)}
|
|
</Button>
|
|
</>
|
|
);
|
|
});
|
|
|
|
export { CopyButton };
|