minor: abstract copy button

apps/web/src/app/(private)/settings/_components/WorkspaceApiKeys/index.tsx

@@ -2,6 +2,7 @@
 
 import {
   Button,
+  CopyButton,
   Icon,
   Table,
   TableBody,
@@ -34,7 +35,7 @@ export default function WorkspaceApiKeys() {
             </TableHeader>
             <TableBody>
               {apiKeys.map((apiKey) => (
-                <TableRow key={apiKey.id} verticalPadding>
+                <TableRow key={apiKey.id} verticalPadding hoverable={false}>
                   <TableCell>
                     <Text.H4>{apiKey.name || 'Unnamed API Key'}</Text.H4>
                   </TableCell>
@@ -50,9 +51,15 @@ export default function WorkspaceApiKeys() {
                             })
                           }}
                         >
-                          <Text.H4 color='foregroundMuted'>
-                            {apiKey.token}
-                          </Text.H4>
+                          <div className='flex flex-row items-center gap-2'>
+                            <Text.H4 color='foregroundMuted'>
+                              {apiKey.token}
+                            </Text.H4>
+                            <CopyButton
+                              content={apiKey.token}
+                              color='foregroundMuted'
+                            />
+                          </div>
                         </Button>
                       }
                     >

packages/web-ui/src/ds/atoms/CodeBlock/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
-import { CopyButton } from './CopyButton'
+import { CopyButton } from '../CopyButton'
 
 interface CodeBlockProps {
   language: string
@@ -14,7 +14,7 @@ export function CodeBlock({ language, children }: CodeBlockProps) {
   return (
     <div className='relative max-w-full'>
       <div className='absolute top-4 right-2'>
-        <CopyButton content={children} />
+        <CopyButton content={children} color='foregroundMuted' />
       </div>
       <SyntaxHighlighter
         language={language}

packages/web-ui/src/ds/atoms/CodeBlock/CopyButton.tsx → packages/web-ui/src/ds/atoms/CopyButton/index.tsx

@@ -3,14 +3,18 @@
 import React from 'react'
 
 import { Button } from '../Button'
-import { Icon } from '../Icons'
+import { Icon, IconProps } from '../Icons'
 import { useToast } from '../Toast/useToast'
 
-interface CopyButtonProps {
+type CopyButtonProps = Omit<IconProps, 'name'> & {
   content: string
 }
 
-export function CopyButton({ content }: CopyButtonProps) {
+export function CopyButton({
+  content,
+  color = 'foregroundMuted',
+  ...rest
+}: CopyButtonProps) {
   const { toast } = useToast()
 
   const handleCopy = () => {
@@ -23,8 +27,8 @@ export function CopyButton({ content }: CopyButtonProps) {
   }
 
   return (
-    <Button onClick={handleCopy} variant='ghost' size='small'>
-      <Icon name='clipboard' />
+    <Button onClick={handleCopy} variant='nope' size='small'>
+      <Icon name='clipboard' color={color} {...rest} />
     </Button>
   )
 }

packages/web-ui/src/ds/atoms/Table/index.tsx

@@ -68,14 +68,16 @@ const TableRow = forwardRef<
   HTMLTableRowElement,
   HTMLAttributes<HTMLTableRowElement> & {
     verticalPadding?: boolean
+    hoverable?: boolean
   }
->(({ className, verticalPadding, ...props }, ref) => (
+>(({ className, verticalPadding, hoverable = true, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      'border-b transition-colors data-[state=selected]:bg-muted',
       {
         '[&>td]:py-4': verticalPadding,
+        'hover:bg-muted/50': hoverable,
       },
       className,
     )}

packages/web-ui/src/ds/atoms/index.ts

@@ -31,3 +31,4 @@ export * from './DropzoneInput'
 export * from './Charts'
 export * from './CircularProgress'
 export * from './CodeBlock'
+export * from './CopyButton'