2023-05-31 13:33:01 -05:00
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
2023-07-03 09:45:25 -05:00
|
|
|
import { IconProp } from "@fortawesome/fontawesome-svg-core";
|
2023-05-31 13:33:01 -05:00
|
|
|
|
|
|
|
type Props = {
|
2023-10-23 00:20:08 -05:00
|
|
|
onClick?: Function;
|
2023-07-03 09:45:25 -05:00
|
|
|
icon?: IconProp;
|
2023-05-31 13:33:01 -05:00
|
|
|
label: string;
|
2023-06-26 17:33:40 -05:00
|
|
|
loading: boolean;
|
2023-05-31 13:33:01 -05:00
|
|
|
className?: string;
|
2023-10-23 00:20:08 -05:00
|
|
|
type?: "button" | "submit" | "reset" | undefined;
|
2023-05-31 13:33:01 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
export default function SubmitButton({
|
|
|
|
onClick,
|
|
|
|
icon,
|
|
|
|
label,
|
2023-06-26 17:33:40 -05:00
|
|
|
loading,
|
2023-05-31 13:33:01 -05:00
|
|
|
className,
|
2023-10-23 00:20:08 -05:00
|
|
|
type,
|
2023-05-31 13:33:01 -05:00
|
|
|
}: Props) {
|
|
|
|
return (
|
2023-10-23 00:20:08 -05:00
|
|
|
<button
|
|
|
|
type={type ? type : undefined}
|
2023-12-07 11:29:45 -06:00
|
|
|
className={`btn btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2 ${
|
2023-12-01 15:29:17 -06:00
|
|
|
className || ""
|
|
|
|
}`}
|
2023-06-26 17:33:40 -05:00
|
|
|
onClick={() => {
|
2023-10-23 00:20:08 -05:00
|
|
|
if (!loading && onClick) onClick();
|
2023-06-26 17:33:40 -05:00
|
|
|
}}
|
2023-05-31 13:33:01 -05:00
|
|
|
>
|
2023-10-23 00:20:08 -05:00
|
|
|
{icon && <FontAwesomeIcon icon={icon} className="h-5" />}
|
2023-12-01 15:29:17 -06:00
|
|
|
<p>{label}</p>
|
2023-10-23 00:20:08 -05:00
|
|
|
</button>
|
2023-05-31 13:33:01 -05:00
|
|
|
);
|
|
|
|
}
|