reorganize code into smaller files & dirs

packages/app/src/Components/Copy/Copy.css

@@ -0,0 +1,4 @@
+.copy .copy-body {
+  font-size: var(--font-size-small);
+  color: var(--font-color);
+}

packages/app/src/Components/Copy/Copy.tsx

@@ -0,0 +1,24 @@
+import "./Copy.css";
+import classNames from "classnames";
+import Icon from "@/Components/Icons/Icon";
+import { useCopy } from "@/Hooks/useCopy";
+
+export interface CopyProps {
+  text: string;
+  maxSize?: number;
+  className?: string;
+}
+export default function Copy({ text, maxSize = 32, className }: 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={classNames("copy flex pointer g8 items-center", className)} onClick={() => copy(text)}>
+      <span className="copy-body">{trimmed}</span>
+      <span className="icon" style={{ color: copied ? "var(--success)" : "var(--highlight)" }}>
+        {copied ? <Icon name="check" size={14} /> : <Icon name="copy-solid" size={14} />}
+      </span>
+    </div>
+  );
+}