File size: 1,551 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import React from "react";
import { NavigationLink } from "#/components/shared/navigation-link";
import { cn } from "#/utils/utils";
import { formControlBackNavButtonClassName } from "#/utils/form-control-classes";
import { BackNavButtonContent } from "./back-nav-button-content";
type BackNavButtonBaseProps = {
children: React.ReactNode;
testId?: string;
className?: string;
};
type BackNavButtonAsButtonProps = BackNavButtonBaseProps & {
onClick: () => void;
};
type BackNavButtonAsLinkProps = BackNavButtonBaseProps & {
to: string;
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
};
export type BackNavButtonProps =
| BackNavButtonAsButtonProps
| BackNavButtonAsLinkProps;
export function BackNavButton(
props: BackNavButtonAsLinkProps,
): React.JSX.Element;
export function BackNavButton(
props: BackNavButtonAsButtonProps,
): React.JSX.Element;
export function BackNavButton(props: BackNavButtonProps) {
const { children, testId, className } = props;
const classes = cn(formControlBackNavButtonClassName, className);
if ("to" in props) {
return (
<NavigationLink
to={props.to}
onClick={props.onClick}
data-testid={testId}
className={classes}
>
<BackNavButtonContent>{children}</BackNavButtonContent>
</NavigationLink>
);
}
return (
<button
type="button"
onClick={props.onClick}
data-testid={testId}
className={classes}
>
<BackNavButtonContent>{children}</BackNavButtonContent>
</button>
);
}
|