33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
|
import clsx from 'clsx'
|
||
|
|
import type { ComponentProps } from 'react'
|
||
|
|
import { forwardRef } from 'react'
|
||
|
|
import { BiWallet } from 'react-icons/bi'
|
||
|
|
import { FaSpinner } from 'react-icons/fa'
|
||
|
|
|
||
|
|
export interface WalletButtonProps extends ComponentProps<'button'> {
|
||
|
|
isLoading?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export const WalletButton = forwardRef<HTMLButtonElement, WalletButtonProps>(function WalletButton(
|
||
|
|
{ className, children, isLoading, ...props },
|
||
|
|
ref,
|
||
|
|
) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
className={clsx(
|
||
|
|
'flex gap-x-2 items-center text-sm font-bold uppercase truncate', // content styling
|
||
|
|
'py-2 px-4 rounded border border-plumbus', // button styling
|
||
|
|
'hover:bg-white/10 transition-colors', // hover styling
|
||
|
|
{ 'cursor-wait': isLoading }, // loading styling
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
ref={ref}
|
||
|
|
type="button"
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{isLoading ? <FaSpinner className="animate-spin" size={16} /> : <BiWallet size={16} />}
|
||
|
|
<span>{isLoading ? 'Loading...' : children}</span>
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
})
|