| 1 |
import cn from '../utilities/cn'; |
| 2 |
|
| 3 |
const Button = ({ |
| 4 |
testId = '', |
| 5 |
disabled = false, |
| 6 |
className = '', |
| 7 |
children = '', |
| 8 |
type = 'primary', |
| 9 |
icon = '', |
| 10 |
iconPositionLeft = true, |
| 11 |
onClick = () => {}, |
| 12 |
}) => { |
| 13 |
const baseClassNames = |
| 14 |
'disco:text-base! disco:shadow-custom disco:border disco:rounded-lg disco:px-8 disco:py-2.5 disco:flex disco:items-center disco:gap-2 disco:outline-hidden disco:font-medium disco:transition-colors disco:duration-200'; |
| 15 |
|
| 16 |
const getTypeClassNames = () => { |
| 17 |
switch (type) { |
| 18 |
case 'primary': |
| 19 |
return cn( |
| 20 |
baseClassNames, |
| 21 |
'disco:text-white disco:bg-primary disco:border-primary disco:hover:bg-primary-dark disco:hover:border-primary-dark' |
| 22 |
); |
| 23 |
|
| 24 |
case 'secondary': |
| 25 |
return cn( |
| 26 |
baseClassNames, |
| 27 |
'disco:text-grey-dark disco:bg-gray-100 disco:border-gray-200 disco:hover:bg-gray-200 disco:hover:border-gray-300' |
| 28 |
); |
| 29 |
|
| 30 |
case 'transparent': |
| 31 |
return cn( |
| 32 |
baseClassNames, |
| 33 |
'disco:text-black disco:bg-transparent disco:border-primary' |
| 34 |
); |
| 35 |
|
| 36 |
default: |
| 37 |
return baseClassNames; |
| 38 |
} |
| 39 |
}; |
| 40 |
|
| 41 |
let buttonClasses = `${getTypeClassNames()} ${className}`; |
| 42 |
|
| 43 |
// Handle icon position (right/left) |
| 44 |
if (!iconPositionLeft) { |
| 45 |
buttonClasses += ' disco:flex-row-reverse!'; |
| 46 |
} |
| 47 |
|
| 48 |
// Apply disabled styles |
| 49 |
if (disabled) { |
| 50 |
buttonClasses += ' disco:opacity-50 disco:cursor-not-allowed'; |
| 51 |
} |
| 52 |
|
| 53 |
return ( |
| 54 |
<button |
| 55 |
data-testid={testId} |
| 56 |
disabled={disabled} |
| 57 |
onClick={!disabled ? onClick : () => {}} |
| 58 |
className={buttonClasses} |
| 59 |
> |
| 60 |
{icon && icon} |
| 61 |
{children} |
| 62 |
</button> |
| 63 |
); |
| 64 |
}; |
| 65 |
|
| 66 |
export default Button; |
| 67 |
|
