From ae319f086f425189c358a0766ad4bbc7098f6c96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Wed, 8 May 2024 13:12:26 +0200
Subject: [PATCH] Use an own language switcher component for the app header

Add a draft for toggling the language between en and de via a language
switcher in the app header.
---
 src/web/components/structure/header.jsx       |  4 +-
 .../components/structure/languageswitch.jsx   | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/web/components/structure/languageswitch.jsx

diff --git a/src/web/components/structure/header.jsx b/src/web/components/structure/header.jsx
index 692185ec11..8f8de43026 100644
--- a/src/web/components/structure/header.jsx
+++ b/src/web/components/structure/header.jsx
@@ -29,6 +29,7 @@ import useGmp from 'web/utils/useGmp';
 
 import LogoutIcon from 'web/components/icon/logouticon';
 import MySettingsIcon from 'web/components/icon/mysettingsicon';
+import LanguageSwitch from './languageswitch';
 
 const Header = () => {
   const gmp = useGmp();
@@ -69,6 +70,7 @@ const Header = () => {
   ];
   return (
     <AppHeader
+      languageSwitch={<LanguageSwitch />}
       menuPoints={menuPoints}
       isLoggedIn={loggedIn}
       username={username}
@@ -78,5 +80,3 @@ const Header = () => {
 };
 
 export default Header;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/structure/languageswitch.jsx b/src/web/components/structure/languageswitch.jsx
new file mode 100644
index 0000000000..165b5d5988
--- /dev/null
+++ b/src/web/components/structure/languageswitch.jsx
@@ -0,0 +1,39 @@
+/* SPDX-FileCopyrightText: 2024 Greenbone AG
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import {FlagDeIcon, FlagEnIcon} from '@greenbone/opensight-ui-components';
+import {ActionIcon} from '@mantine/core';
+
+import useLocale from 'web/hooks/useLocale';
+import useTranslation from 'web/hooks/useTranslation';
+
+const getNextLanguage = language => (language === 'en' ? 'de' : 'en');
+
+const LanguageSwitch = () => {
+  const [language, changeLanguage] = useLocale();
+  const [_] = useTranslation();
+
+  const nextLanguage = getNextLanguage(language);
+  const titles = {
+    en: _('Switch language to English'),
+    de: _('Switch language to German'),
+  };
+
+  const handleLanguageChange = () => {
+    changeLanguage(nextLanguage);
+  };
+  return (
+    <ActionIcon
+      variant="transparent"
+      onClick={handleLanguageChange}
+      title={titles[nextLanguage]}
+      color="neutral.0"
+    >
+      {language === 'en' ? <FlagEnIcon /> : <FlagDeIcon />}
+    </ActionIcon>
+  );
+};
+
+export default LanguageSwitch;