fix(components): standardize ExternalLink styling and add copy functionality

- Fix inconsistent icon sizes in ExternalLink component by removing hardcoded props.
- Standardize icon alignment using new CSS class.
- Add copy-to-clipboard functionality when clicking the link text.

src/components/common/ExternalLink.module.css

@@ -0,0 +1,14 @@
+.link {
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.iconLink {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--base-color-10);
+}

src/components/common/ExternalLink.tsx

@@ -1,23 +1,36 @@
-import { Icon, Row, Text } from '@umami/react-zen';
+'use client';
+import { Icon, Row, Text, useToast } from '@umami/react-zen';
 import Link, { type LinkProps } from 'next/link';
 import type { ReactNode } from 'react';
+import { useMessages } from '@/components/hooks';
 import { ExternalLink as LinkIcon } from '@/components/icons';
+import styles from './ExternalLink.module.css';
 
 export function ExternalLink({
   href,
   children,
   ...props
-}: LinkProps & { href: string; children: ReactNode }) {
+}: Omit<LinkProps, 'href'> & { href: string; children: ReactNode }) {
+  const { toast } = useToast();
+  const { formatMessage, labels } = useMessages();
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(href);
+    toast(formatMessage(labels.copied));
+  };
+
   return (
     <Row alignItems="center" overflow="hidden" gap>
       <Text title={href} truncate>
-        <Link {...props} href={href} target="_blank">
+        <span onClick={handleCopy} className={styles.link}>
           {children}
-        </Link>
+        </span>
       </Text>
-      <Icon size="sm" strokeColor="muted">
+      <Link {...props} href={href} target="_blank" className={styles.iconLink}>
-        <LinkIcon />
+        <Icon>
-      </Icon>
+          <LinkIcon />
+        </Icon>
+      </Link>
     </Row>
   );
 }

src/components/messages.ts

@@ -364,6 +364,7 @@ export const labels = defineMessages({
   documentation: { id: 'label.documentation', defaultMessage: 'Documentation' },
   switchAccount: { id: 'label.switch-account', defaultMessage: 'Switch account' },
   advanced: { id: 'label.advanced', defaultMessage: 'Advanced' },
+  copied: { id: 'label.copied', defaultMessage: 'Copied to clipboard' },
 });
 
 export const messages = defineMessages({