1import { CheckIcon, CopyIcon } from "lucide-react";
2import { useRef } from "react";
3import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
4import {
5 ANCHORED_COPY_TOAST_TIMEOUT_MS,
6 showAnchoredCopyErrorToast,
7 showAnchoredCopySuccessToast,
8} from "./ui/anchoredCopyToast";
9import { Button } from "./ui/button";
10import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip";
11
12export function DiffFilePathCopyButton({ filePath }: { filePath: string }) {
13 const ref = useRef<HTMLButtonElement>(null);
14 const { copyToClipboard, isCopied } = useCopyToClipboard<void>({
15 onCopy: () => showAnchoredCopySuccessToast(ref),
16 onError: (error) => showAnchoredCopyErrorToast(ref, error),
17 timeout: ANCHORED_COPY_TOAST_TIMEOUT_MS,
18 });
19
20 return (
21 <Tooltip>
22 <TooltipTrigger
23 render={
24 <Button
25 ref={ref}
26 size="icon-micro"
27 variant="ghost-muted"
28 aria-label="Copy file path"
29 onClick={() => copyToClipboard(filePath, undefined)}
30 />
31 }
32 >
33 {isCopied ? <CheckIcon className="size-3 text-success" /> : <CopyIcon className="size-3" />}
34 </TooltipTrigger>
35 <TooltipPopup>
36 <p>{isCopied ? "Copied" : "Copy path"}</p>
37 </TooltipPopup>
38 </Tooltip>
39 );
40}