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