125 lines
2.9 KiB
React
125 lines
2.9 KiB
React
|
import React from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
|
||
|
|
const Button = ({
|
||
|
|
children,
|
||
|
|
variant = defaults.variant,
|
||
|
|
color = defaults.color,
|
||
|
|
size = defaults.size,
|
||
|
|
radius = defaults.radius,
|
||
|
|
disabled = defaults.disabled,
|
||
|
|
elevation,
|
||
|
|
type = defaults.type,
|
||
|
|
startIcon: startIconProp,
|
||
|
|
endIcon: endIconProp,
|
||
|
|
className,
|
||
|
|
...rest
|
||
|
|
}) => {
|
||
|
|
const hasIcon = startIconProp || endIconProp;
|
||
|
|
const getClasses = () => {
|
||
|
|
const classes = [];
|
||
|
|
let buttonElevation;
|
||
|
|
|
||
|
|
if (variant === 'text') {
|
||
|
|
if (elevation) {
|
||
|
|
buttonElevation = elevation;
|
||
|
|
} else {
|
||
|
|
buttonElevation = false;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
buttonElevation = defaults.elevation;
|
||
|
|
}
|
||
|
|
|
||
|
|
classes.push(variantClasses[variant][color]);
|
||
|
|
classes.push(radiusClasses[radius]);
|
||
|
|
classes.push(sizeClasses[size]);
|
||
|
|
classes.push(disabledClasses[disabled]);
|
||
|
|
classes.push(elevationClasses[buttonElevation]);
|
||
|
|
classes.push(className);
|
||
|
|
|
||
|
|
if (hasIcon) {
|
||
|
|
classes.push(baseIconClasses);
|
||
|
|
}
|
||
|
|
|
||
|
|
return classes.join(' ');
|
||
|
|
};
|
||
|
|
|
||
|
|
const baseIconClasses = 'inline-flex items-center';
|
||
|
|
const baseClasses =
|
||
|
|
'outline-none transition duration-300 ease-in-out rounded font-bold focus:outline-none';
|
||
|
|
|
||
|
|
const startIcon = startIconProp && (
|
||
|
|
<div className="mr-2">{startIconProp}</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const endIcon = endIconProp && <div className="ml-2">{endIconProp}</div>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button className={`${baseClasses} ${getClasses()}`} type={type} {...rest}>
|
||
|
|
{startIcon}
|
||
|
|
{children}
|
||
|
|
{endIcon}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const defaults = {
|
||
|
|
variant: 'outlined',
|
||
|
|
color: 'default',
|
||
|
|
size: 'medium',
|
||
|
|
radius: 'medium',
|
||
|
|
disabled: false,
|
||
|
|
elevation: true,
|
||
|
|
type: 'button',
|
||
|
|
};
|
||
|
|
|
||
|
|
const radiusClasses = {
|
||
|
|
small: 'rounded-sm',
|
||
|
|
medium: 'rounded-md',
|
||
|
|
large: 'rounded-lg',
|
||
|
|
full: 'rounded-full',
|
||
|
|
};
|
||
|
|
|
||
|
|
const disabledClasses = {
|
||
|
|
true: 'cursor-not-allowed',
|
||
|
|
false: '',
|
||
|
|
};
|
||
|
|
|
||
|
|
const elevationClasses = {
|
||
|
|
true: 'shadow',
|
||
|
|
false: 'shadow-none',
|
||
|
|
};
|
||
|
|
|
||
|
|
const variantClasses = {
|
||
|
|
text: {
|
||
|
|
default: 'hover:bg-gray-200 text-black',
|
||
|
|
primary: 'hover:bg-blue-100 text-blue-900',
|
||
|
|
secondary: 'hover:bg-blue-100 text-blue-300',
|
||
|
|
},
|
||
|
|
outlined: {
|
||
|
|
default: 'border border-black text-black hover:bg-gray-200',
|
||
|
|
primary: 'border border-blue-900 text-blue-900 hover:bg-blue-100',
|
||
|
|
secondary: 'border border-blue-300 text-blue-300 hover:bg-blue-100',
|
||
|
|
},
|
||
|
|
contained: {
|
||
|
|
default: 'bg-black hover:bg-gray-800 text-white',
|
||
|
|
primary: 'bg-blue-900 hover:bg-blue-800 text-white',
|
||
|
|
secondary: 'bg-blue-300 hover:bg-blue-500 text-black',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const sizeClasses = {
|
||
|
|
small: 'py-1 px-2 text-sm',
|
||
|
|
medium: 'py-2 px-4 text-base',
|
||
|
|
large: 'py-3 px-6 text-lg',
|
||
|
|
};
|
||
|
|
|
||
|
|
Button.propTypes = {
|
||
|
|
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
||
|
|
radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
|
||
|
|
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
|
||
|
|
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Button;
|