From f32892adaf9694a55c10f6e41d1fd39deeaa3e7c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 11 Jun 2025 10:20:36 +0800
Subject: [PATCH] add components directory

---
 .../src/Pages/Auth/components/AuthHeader.jsx  | 45 +++++++++++++++++++
 client/src/Pages/Auth/components/TextLink.jsx | 34 ++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 client/src/Pages/Auth/components/AuthHeader.jsx
 create mode 100644 client/src/Pages/Auth/components/TextLink.jsx

diff --git a/client/src/Pages/Auth/components/AuthHeader.jsx b/client/src/Pages/Auth/components/AuthHeader.jsx
new file mode 100644
index 000000000..c6ad46a47
--- /dev/null
+++ b/client/src/Pages/Auth/components/AuthHeader.jsx
@@ -0,0 +1,45 @@
+// Components
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Logo from "../../../assets/icons/checkmate-icon.svg?react";
+import LanguageSelector from "../../../Components/LanguageSelector";
+import ThemeSwitch from "../../../Components/ThemeSwitch";
+
+// Utils
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+
+const AuthHeader = () => {
+	// Hooks
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			justifyContent="space-between"
+			px={theme.spacing(12)}
+			gap={theme.spacing(4)}
+		>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={theme.spacing(4)}
+			>
+				<Logo style={{ borderRadius: theme.shape.borderRadius }} />
+				<Typography sx={{ userSelect: "none" }}>{t("common.appName")}</Typography>
+			</Stack>
+			<Stack
+				direction="row"
+				spacing={theme.spacing(2)}
+				alignItems="center"
+			>
+				<LanguageSelector />
+				<ThemeSwitch />
+			</Stack>
+		</Stack>
+	);
+};
+
+export default AuthHeader;
diff --git a/client/src/Pages/Auth/components/TextLink.jsx b/client/src/Pages/Auth/components/TextLink.jsx
new file mode 100644
index 000000000..a10839e84
--- /dev/null
+++ b/client/src/Pages/Auth/components/TextLink.jsx
@@ -0,0 +1,34 @@
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import Link from "@mui/material/Link";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Link as RouterLink } from "react-router-dom";
+
+const TextLink = ({ text, linkText, href }) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(4)}
+		>
+			<Typography>{text}</Typography>
+			<Link
+				color="accent"
+				to={href}
+				component={RouterLink}
+			>
+				{linkText}
+			</Link>
+		</Stack>
+	);
+};
+
+TextLink.propTypes = {
+	text: PropTypes.string,
+	linkText: PropTypes.string,
+	href: PropTypes.string,
+};
+
+export default TextLink;