login UI

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

@@ -0,0 +1,42 @@
+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?: string;
+}
+
+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}
+			>
+				{linkText}
+			</Link>
+		</Stack>
+	);
+};