41 lines · 1.3 KB · TypeScript
RawDownload
import { CheckIcon, CopyIcon } from "lucide-react";import { useRef } from "react";import { useCopyToClipboard } from "../hooks/useCopyToClipboard";import {  ANCHORED_COPY_TOAST_TIMEOUT_MS,  showAnchoredCopyErrorToast,  showAnchoredCopySuccessToast,} from "./ui/anchoredCopyToast";import { Button } from "./ui/button";import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip"; export function DiffFilePathCopyButton({ filePath }: { filePath: string }) {  const ref = useRef<HTMLButtonElement>(null);  const { copyToClipboard, isCopied } = useCopyToClipboard<void>({    onCopy: () => showAnchoredCopySuccessToast(ref),    onError: (error) => showAnchoredCopyErrorToast(ref, error),    timeout: ANCHORED_COPY_TOAST_TIMEOUT_MS,  });   return (    <Tooltip>      <TooltipTrigger        render={          <Button            ref={ref}            size="icon-micro"            variant="ghost"            className="text-muted-foreground [:hover,[data-pressed]]:bg-transparent"            aria-label="Copy file path"            onClick={() => copyToClipboard(filePath, undefined)}          />        }      >        {isCopied ? <CheckIcon className="size-3 text-success" /> : <CopyIcon className="size-3" />}      </TooltipTrigger>      <TooltipPopup>        <p>{isCopied ? "Copied" : "Copy path"}</p>      </TooltipPopup>    </Tooltip>  );}