snort/src/Element/Copy.tsx

import "./Copy.css";
import Check from "Icons/Check";
import CopyIcon from "Icons/Copy";
import { useCopy } from "useCopy";

export interface CopyProps {
  text: string;
  maxSize?: number;
}
export default function Copy({ text, maxSize = 32 }: 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="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>
  );
}