55 lines
1.0 KiB
TypeScript
55 lines
1.0 KiB
TypeScript
import { Button as ButtonRAC } from 'react-aria-components'
|
|
import { Loading, type LoadingProps } from '../Loading/Loading'
|
|
|
|
import { variants } from './variants'
|
|
import type { ButtonProps } from './types'
|
|
|
|
export function Button({
|
|
variant,
|
|
color,
|
|
size,
|
|
wrapping,
|
|
|
|
typography,
|
|
className,
|
|
children,
|
|
...props
|
|
}: ButtonProps) {
|
|
const classNames = variants({
|
|
variant,
|
|
color,
|
|
size,
|
|
wrapping,
|
|
typography,
|
|
className,
|
|
})
|
|
|
|
let loadingType: LoadingProps['type'] = 'White'
|
|
if (variant === 'Secondary') {
|
|
if (color === 'Inverted') {
|
|
loadingType = 'White'
|
|
} else {
|
|
loadingType = 'Dark'
|
|
}
|
|
} else {
|
|
if (color === 'Inverted') {
|
|
loadingType = 'Dark'
|
|
} else {
|
|
loadingType = 'White'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ButtonRAC {...props} className={classNames}>
|
|
{({ isPending }) => {
|
|
return (
|
|
<>
|
|
{children}
|
|
{isPending && <Loading size={20} type={loadingType} />}
|
|
</>
|
|
)
|
|
}}
|
|
</ButtonRAC>
|
|
)
|
|
}
|