mirror of https://github.com/coder/coder.git
36 lines
985 B
TypeScript
36 lines
985 B
TypeScript
import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
|
|
import type { FC, HTMLAttributes } from "react";
|
|
import { useClickable } from "hooks/useClickable";
|
|
import { useClipboard } from "hooks/useClipboard";
|
|
|
|
interface CopyableValueProps extends HTMLAttributes<HTMLSpanElement> {
|
|
value: string;
|
|
placement?: TooltipProps["placement"];
|
|
PopperProps?: TooltipProps["PopperProps"];
|
|
}
|
|
|
|
export const CopyableValue: FC<CopyableValueProps> = ({
|
|
value,
|
|
placement = "bottom-start",
|
|
PopperProps,
|
|
children,
|
|
...attrs
|
|
}) => {
|
|
const { showCopiedSuccess, copyToClipboard } = useClipboard({
|
|
textToCopy: value,
|
|
});
|
|
const clickableProps = useClickable<HTMLSpanElement>(copyToClipboard);
|
|
|
|
return (
|
|
<Tooltip
|
|
title={showCopiedSuccess ? "Copied!" : "Click to copy"}
|
|
placement={placement}
|
|
PopperProps={PopperProps}
|
|
>
|
|
<span {...attrs} {...clickableProps} css={{ cursor: "pointer" }}>
|
|
{children}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
};
|