25 lines
850 B
TypeScript
25 lines
850 B
TypeScript
import "./copy.css";
|
|
import { useCopy } from "hooks/copy";
|
|
import { Icon } from "./icon";
|
|
|
|
export interface CopyProps {
|
|
text: string;
|
|
maxSize?: number;
|
|
hideText?: boolean;
|
|
className?: string;
|
|
}
|
|
export default function Copy({ text, maxSize = 32, className, hideText }: CopyProps) {
|
|
const { copy, copied } = useCopy();
|
|
const sliceLength = maxSize / 2;
|
|
const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}...${text.slice(-sliceLength)}` : text;
|
|
|
|
return (
|
|
<div className={`copy${className ? ` ${className}` : ""}`} onClick={() => copy(text)}>
|
|
{!hideText && <span className="body">{trimmed}</span>}
|
|
<span className="icon" style={{ color: copied ? "var(--success)" : "var(--highlight)" }}>
|
|
{copied ? <Icon name="check" size={14} /> : <Icon name="copy" size={14} />}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|