refactor: enhance LanguageSwitcher component with tooltip for current locale

src/layouts/common/languageSwitcher/LanguageSwitcher.jsx

@@ -1,32 +1,48 @@
 import React, { useContext } from "react";
 import { AppContext } from "App";
 import { useTheme } from "@mui/material/styles";
-import { IconButton } from "@mui/material";
+import { IconButton, Tooltip } from "@mui/material";
+import Zoom from "@mui/material/Zoom";
+
 // import { FormattedMessage } from "react-intl";
 import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
 
 const LanguageSwitcher = () => {
 	const theme = useTheme();
 	const appContext = useContext(AppContext);
+	const currentLocale =
+		appContext && appContext.locale
+			? String(appContext.locale).toUpperCase()
+			: "EN";
+
 	return (
-		<IconButton
+		<Tooltip
-			aria-label="Language Switcher"
+			title={currentLocale}
-			onClick={() => {
+			disableInteractive
-				const setLocale = appContext && appContext.setLocale;
+			slots={{
-				if (typeof setLocale === "function") {
+				transition: Zoom,
-					setLocale(appContext.locale === "en" ? "nl" : "en");
-				}
-			}}
-			size="large"
-			sx={{
-				alignSelf: "right",
-				mr: 1,
-				ml: 1,
-				color: theme.palette.text.secondary,
-				fontSize: "24px",
 			}}>
-			{<LanguageOutlinedIcon />}
+			<span>
-		</IconButton>
+				<IconButton
+					aria-label="Language Switcher"
+					onClick={() => {
+						const setLocale = appContext && appContext.setLocale;
+						if (typeof setLocale === "function") {
+							setLocale(appContext.locale === "en" ? "nl" : "en");
+						}
+					}}
+					size="large"
+					sx={{
+						alignSelf: "right",
+						mr: 1,
+						ml: 1,
+						color: theme.palette.text.secondary,
+						fontSize: "24px",
+					}}>
+					{<LanguageOutlinedIcon />}
+				</IconButton>
+			</span>
+		</Tooltip>
 	);
 };