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