mirror of
https://github.com/supabase/supabase.git
synced 2026-06-21 22:12:50 +08:00
44b9ce3e5f
* very wip * add expandable rows * fix table layout, collapsible row, spacing issues * use new query with filters everywhere * rm unused queries * rm unused fn * improve loading state * fix text overflowing in role * rm padding so that table doesn't always need scroll * fix icon in search input * add latency to table row heading to clarify what col youre sorting with * rm unused imports * run prettier * align sql with row content * add syntax highlighting and sort icons * rm copy btn * move tailwind dep to correct package, rm unused syntax highlighting, rm unused component
49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import { Button, ButtonProps, IconCheck, IconClipboard } from 'ui'
|
|
import { copyToClipboard } from 'lib/helpers'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
export interface CopyButtonProps extends ButtonProps {
|
|
text: string
|
|
iconOnly?: boolean
|
|
copyLabel?: string
|
|
copiedLabel?: string
|
|
}
|
|
const CopyButton = ({
|
|
text,
|
|
iconOnly = false,
|
|
children,
|
|
onClick,
|
|
copyLabel = 'Copy',
|
|
copiedLabel = 'Copied',
|
|
...props
|
|
}: CopyButtonProps) => {
|
|
const [showCopied, setShowCopied] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (!showCopied) return
|
|
const timer = setTimeout(() => setShowCopied(false), 2000)
|
|
return () => clearTimeout(timer)
|
|
}, [showCopied])
|
|
|
|
return (
|
|
<Button
|
|
onClick={(e) => {
|
|
setShowCopied(true)
|
|
copyToClipboard(text)
|
|
onClick?.(e)
|
|
}}
|
|
icon={
|
|
showCopied ? (
|
|
<IconCheck size="tiny" strokeWidth={2} className="text-brand" />
|
|
) : (
|
|
<IconClipboard size="tiny" />
|
|
)
|
|
}
|
|
{...props}
|
|
>
|
|
{!iconOnly && <>{children ?? (showCopied ? copiedLabel : copyLabel)}</>}
|
|
</Button>
|
|
)
|
|
}
|
|
export default CopyButton
|