2023-01-09 11:00:23 +00:00
|
|
|
import "./Copy.css";
|
2023-02-06 21:42:47 +00:00
|
|
|
import Check from "Icons/Check";
|
|
|
|
import CopyIcon from "Icons/Copy";
|
2023-01-20 11:11:50 +00:00
|
|
|
import { useCopy } from "useCopy";
|
2023-01-09 11:00:23 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export interface CopyProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
text: string;
|
|
|
|
maxSize?: number;
|
2023-01-16 17:48:25 +00:00
|
|
|
}
|
|
|
|
export default function Copy({ text, maxSize = 32 }: CopyProps) {
|
2023-02-07 20:04:50 +00:00
|
|
|
const { copy, copied, error } = useCopy();
|
|
|
|
const sliceLength = maxSize / 2;
|
|
|
|
const trimmed =
|
|
|
|
text.length > maxSize
|
|
|
|
? `${text.slice(0, sliceLength)}...${text.slice(-sliceLength)}`
|
|
|
|
: text;
|
2023-01-10 09:18:46 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
|
|
|
<div className="flex flex-row copy" onClick={() => copy(text)}>
|
|
|
|
<span className="body">{trimmed}</span>
|
|
|
|
<span
|
|
|
|
className="icon"
|
|
|
|
style={{ color: copied ? "var(--success)" : "var(--highlight)" }}
|
|
|
|
>
|
|
|
|
{copied ? (
|
|
|
|
<Check width={13} height={13} />
|
|
|
|
) : (
|
|
|
|
<CopyIcon width={13} height={13} />
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
);
|
2023-01-10 09:18:46 +00:00
|
|
|
}
|