Checkmate/client/src/Components/design-elements/TextLink.tsx

import Typography from "@mui/material/Typography";
import Stack from "@mui/material/Stack";
import type { StackProps } from "@mui/material/Stack";
import Link from "@mui/material/Link";
import { Link as RouterLink } from "react-router-dom";

import { useTheme } from "@mui/material/styles";

interface TextLinkProps extends StackProps {
	text: string;
	linkText: string;
	href: string;
	target?: "_self" | "_blank" | "_parent" | "_top";
}

export const TextLink = ({
	text,
	linkText,
	href,
	target = "_self",
	...props
}: TextLinkProps) => {
	const theme = useTheme();

	return (
		<Stack
			direction="row"
			gap={theme.spacing(4)}
			{...props}
		>
			<Typography>{text}</Typography>
			<Link
				color="primary"
				to={href}
				component={RouterLink}
				target={target}
				{...(target === "_blank" && { rel: "noopener noreferrer" })}
			>
				{linkText}
			</Link>
		</Stack>
	);
};