mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-27 06:39:24 +00:00

Better tool flow for reusability Pinning Styling of tool flow consumption of files after tooling --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com> Co-authored-by: James Brunton <jbrunton96@gmail.com>
58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@mantine/core';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export interface OperationButtonProps {
|
|
onClick?: () => void;
|
|
isLoading?: boolean;
|
|
disabled?: boolean;
|
|
loadingText?: string;
|
|
submitText?: string;
|
|
variant?: 'filled' | 'outline' | 'subtle';
|
|
color?: string;
|
|
fullWidth?: boolean;
|
|
mt?: string;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
'data-testid'?: string;
|
|
}
|
|
|
|
const OperationButton = ({
|
|
onClick,
|
|
isLoading = false,
|
|
disabled = false,
|
|
loadingText,
|
|
submitText,
|
|
variant = 'filled',
|
|
color = 'blue',
|
|
fullWidth = false,
|
|
mt = 'md',
|
|
type = 'button',
|
|
'data-testid': dataTestId
|
|
}: OperationButtonProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Button
|
|
type={type}
|
|
onClick={onClick}
|
|
fullWidth={fullWidth}
|
|
mr='md'
|
|
ml='md'
|
|
mt={mt}
|
|
loading={isLoading}
|
|
disabled={disabled}
|
|
variant={variant}
|
|
color={color}
|
|
data-testid={dataTestId}
|
|
style={{ minHeight: '2.5rem' }}
|
|
>
|
|
{isLoading
|
|
? (loadingText || t("loading", "Loading..."))
|
|
: (submitText || t("submit", "Submit"))
|
|
}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default OperationButton;
|