44 lines
960 B
TypeScript
44 lines
960 B
TypeScript
"use client";
|
|
import React, {
|
|
ButtonHTMLAttributes,
|
|
DetailedHTMLProps,
|
|
useEffect,
|
|
useState,
|
|
forwardRef,
|
|
} from "react";
|
|
import { cn } from "@repo/shared-components";
|
|
|
|
export const Button = forwardRef<
|
|
HTMLButtonElement,
|
|
DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
|
|
isLoading?: boolean;
|
|
}
|
|
>(({ isLoading, ...props }, ref) => {
|
|
const [isLoadingState, setIsLoadingState] = useState(isLoading);
|
|
|
|
useEffect(() => {
|
|
setIsLoadingState(isLoading);
|
|
}, [isLoading]);
|
|
|
|
return (
|
|
<button
|
|
{...props}
|
|
ref={ref}
|
|
className={cn("btn", props.className)}
|
|
disabled={isLoadingState || props.disabled}
|
|
onClick={async (e) => {
|
|
if (props.onClick) {
|
|
setIsLoadingState(true);
|
|
await props.onClick(e);
|
|
setIsLoadingState(false);
|
|
}
|
|
}}
|
|
>
|
|
{isLoadingState && <span className="loading loading-spinner loading-sm"></span>}
|
|
{props.children}
|
|
</button>
|
|
);
|
|
});
|
|
|
|
Button.displayName = "Button";
|