27 lines
822 B
TypeScript
27 lines
822 B
TypeScript
|
import type { ButtonHTMLAttributes, FunctionComponent } from "react";
|
||
|
|
import { useTransition } from "@remix-run/react";
|
||
|
|
import clsx from "clsx";
|
||
|
|
|
||
|
|
type Props = ButtonHTMLAttributes<HTMLButtonElement>;
|
||
|
|
|
||
|
|
const Button: FunctionComponent<Props> = ({ children, ...props }) => {
|
||
|
|
const transition = useTransition();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
className={clsx(
|
||
|
|
"w-full flex justify-center py-2 px-4 border border-transparent text-base font-medium rounded-md text-white focus:outline-none focus:border-primary-700 focus:shadow-outline-primary transition duration-150 ease-in-out",
|
||
|
|
{
|
||
|
|
"bg-primary-400 cursor-not-allowed": transition.state === "submitting",
|
||
|
|
"bg-primary-600 hover:bg-primary-700": transition.state !== "submitting",
|
||
|
|
},
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Button;
|