File size: 1,432 Bytes
19e25f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import * as React from 'react';
import { cn } from '@/lib/utils';
const TextButtonVariant = ['primary', 'basic'] as const;
type TextButtonProps = {
variant?: (typeof TextButtonVariant)[number];
} & React.ComponentPropsWithRef<'button'>;
const TextButton = React.forwardRef<HTMLButtonElement, TextButtonProps>(
(
{
children,
className,
variant = 'primary',
disabled: buttonDisabled,
...rest
},
ref
) => {
return (
<button
ref={ref}
type='button'
disabled={buttonDisabled}
className={cn(
'button inline-flex items-center justify-center font-semibold',
'focus-visible:ring-primary-500 focus:outline-none focus-visible:ring',
'transition duration-100',
//#region //*=========== Variant ===========
variant === 'primary' && [
'text-primary-500 hover:text-primary-600 active:text-primary-700',
'disabled:text-primary-200',
],
variant === 'basic' && [
'text-black hover:text-gray-600 active:text-gray-800',
'disabled:text-gray-300',
],
//#endregion //*======== Variant ===========
'disabled:cursor-not-allowed disabled:brightness-105 disabled:hover:underline',
className
)}
{...rest}
>
{children}
</button>
);
}
);
export default TextButton;
|