import React from "react";
type ButtonProps = {
disabled?: boolean;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
children?: React.ReactNode;
color?: string;
};
const Button: React.FC<ButtonProps> = function ({
disabled = false,
onClick = (e) => {
alert(
`Button with text "${e.currentTarget.innerText}" was clicked but does not have an onClick method!`
);
},
children,
color = "zinc",
}: ButtonProps) {
const buttonClass = `flex rounded-md bg-${color}-900 p-1 text-${color}-300 transition duration-300 ease-in-out hover:bg-${color}-800 hover:text-${color}-200
${disabled ? "cursor-not-allowed opacity-50" : ""}`;
return (
<button
className={buttonClass}
onClick={
!disabled
? onClick
: () => {
"do nothing";
}
}
>
{children ?? "No content"}
<br />
{buttonClass}
</button>
);
};
export default Button;
import React from "react";
type ButtonProps = {
disabled?: boolean;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
children?: React.ReactNode;
color?: string;
};
const Button: React.FC<ButtonProps> = function ({
disabled = false,
onClick = (e) => {
alert(
`Button with text "${e.currentTarget.innerText}" was clicked but does not have an onClick method!`
);
},
children,
color = "zinc",
}: ButtonProps) {
const buttonClass = `flex rounded-md bg-${color}-900 p-1 text-${color}-300 transition duration-300 ease-in-out hover:bg-${color}-800 hover:text-${color}-200
${disabled ? "cursor-not-allowed opacity-50" : ""}`;
return (
<button
className={buttonClass}
onClick={
!disabled
? onClick
: () => {
"do nothing";
}
}
>
{children ?? "No content"}
<br />
{buttonClass}
</button>
);
};
export default Button;