56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import Button from "@/components/Low/Button";
|
|
import clsx from "clsx";
|
|
|
|
interface Props {
|
|
handlePrevious: () => void;
|
|
handleNext: () => void;
|
|
hidePrevious?: boolean;
|
|
nextLabel?: string;
|
|
isLoading?: boolean;
|
|
isDisabled?: boolean;
|
|
previousDisabled?: boolean;
|
|
nextDisabled?: boolean;
|
|
previousLoading?: boolean;
|
|
nextLoading?: boolean;
|
|
}
|
|
|
|
const ProgressButtons: React.FC<Props> = ({
|
|
handlePrevious,
|
|
handleNext,
|
|
hidePrevious = false,
|
|
isLoading = false,
|
|
isDisabled = false,
|
|
previousDisabled = false,
|
|
nextDisabled = false,
|
|
previousLoading = false,
|
|
nextLoading = false,
|
|
nextLabel = "Next Page"
|
|
}) => {
|
|
return (
|
|
<div className={clsx("flex w-full gap-8", !hidePrevious ? "justify-between" : "flex-row-reverse")}>
|
|
{!hidePrevious && (
|
|
<Button
|
|
disabled={isDisabled || previousDisabled}
|
|
isLoading={isLoading || previousLoading}
|
|
color="purple"
|
|
variant="outline"
|
|
onClick={handlePrevious}
|
|
className="max-w-[200px] w-full"
|
|
>
|
|
Previous Page
|
|
</Button>
|
|
)}
|
|
<Button
|
|
disabled={isDisabled || nextDisabled}
|
|
isLoading={isLoading || nextLoading}
|
|
color="purple"
|
|
onClick={handleNext}
|
|
className="max-w-[200px] self-end w-full"
|
|
>
|
|
{nextLabel}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProgressButtons; |