mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
40 lines
986 B
TypeScript
40 lines
986 B
TypeScript
'use client'
|
|
|
|
import { Check, Copy } from 'lucide-react'
|
|
import * as React from 'react'
|
|
import { Button, cn, copyToClipboard } from 'ui'
|
|
|
|
interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
value: string
|
|
src?: string
|
|
}
|
|
|
|
export function CopyButton({ value, className, src, ...props }: CopyButtonProps) {
|
|
const [hasCopied, setHasCopied] = React.useState(false)
|
|
|
|
React.useEffect(() => {
|
|
setTimeout(() => {
|
|
setHasCopied(false)
|
|
}, 2000)
|
|
}, [hasCopied])
|
|
|
|
return (
|
|
<Button
|
|
size="small"
|
|
variant="outline"
|
|
className={cn(
|
|
'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0',
|
|
className
|
|
)}
|
|
onClick={() => {
|
|
copyToClipboard(value)
|
|
setHasCopied(true)
|
|
}}
|
|
{...props}
|
|
>
|
|
<span className="sr-only">Copy</span>
|
|
{hasCopied ? <Check className="h-3 w-3 text-brand-600" /> : <Copy className="h-3 w-3" />}
|
|
</Button>
|
|
)
|
|
}
|