snort/src/element/Copy.tsx

28 lines
933 B
TypeScript
Raw Normal View History

2023-01-09 11:00:23 +00:00
import "./Copy.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
import { useCopy } from "../useCopy";
2023-01-16 17:48:25 +00:00
export interface CopyProps {
text: string,
maxSize?: number
}
export default function Copy({ text, maxSize = 32 }: CopyProps) {
2023-01-09 11:00:23 +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-09 11:00:23 +00:00
return (
<div className="flex flex-row copy" onClick={() => copy(text)}>
<span className="body">
{trimmed}
</span>
2023-01-09 11:00:23 +00:00
<FontAwesomeIcon
icon={copied ? faCheck : faCopy}
size="xs"
style={{ color: copied ? 'var(--success)' : 'currentColor', marginRight: '2px' }}
2023-01-09 11:00:23 +00:00
/>
</div>
)
}