✨ feat(app): add support logos in sidebar

digitalwarenkombinat · Feb 19, 2024 · 7659a4f · 7659a4f
1 parent 671c00d
commit 7659a4f
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 2 deletions.
diff --git a/public/logos/bmbf_logo_de.jpg b/public/logos/bmbf_logo_de.jpg
diff --git a/public/logos/bmbf_logo_en.jpg b/public/logos/bmbf_logo_en.jpg
diff --git a/public/logos/digitalwarenkombinat.png b/public/logos/digitalwarenkombinat.png
diff --git a/public/logos/prototype_fund_logo.png b/public/logos/prototype_fund_logo.png
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -1,14 +1,56 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 // @ts-expect-error konsta typing
-import { Block, Navbar, Page, Panel } from "konsta/react";
+import { Block, Button, Link, Navbar, Page, Panel } from "konsta/react";
 import { SetStateAction } from "react";
 import { useTranslation } from "react-i18next";
 
+import LogoBMBFIconDE from "/logos/bmbf_logo_de.jpg";
+import LogoBMBFIconEN from "/logos/bmbf_logo_en.jpg";
+import LogoDigitalwarenkombinatIcon from "/logos/digitalwarenkombinat.png";
+import LogoPrototypeFundIcon from "/logos/prototype_fund_logo.png";
+
+const LogoPrototypeFund = () => {
+  return (
+    <Link href={"https://prototypefund.de/"} target="_blank">
+      <img
+        src={LogoPrototypeFundIcon}
+        alt="Logo Protype Fund"
+        className="w-96 m-auto"
+      />
+    </Link>
+  );
+};
+
+const LogoBMBF = () => {
+  const { i18n } = useTranslation();
+  return (
+    <Link href={"https://www.bmbf.de/"} target="_blank">
+      <img
+        src={i18n.resolvedLanguage === "en" ? LogoBMBFIconEN : LogoBMBFIconDE}
+        alt="Logo Bundesministerium für Bildung und Forschung"
+        className="w-96 m-auto"
+      />
+    </Link>
+  );
+};
+
+const LogoDigitalwarenkombinat = () => {
+  return (
+    <Link href={"https://digitalwarenkombinat.de/"} target="_blank">
+      <img
+        src={LogoDigitalwarenkombinatIcon}
+        alt="Logo Digitalwarenkombinat"
+        className="w-96 m-auto"
+      />
+    </Link>
+  );
+};
+
 export default function Sidebar(
   panelOpened: boolean,
   setPanelOpened: (value: SetStateAction<boolean>) => void,
 ) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   return (
     <Panel
       side="right"
@@ -25,8 +67,28 @@ export default function Sidebar(
           }
         />
         <Block className="space-y-4">
+          <p className="text-xl">{t("sidebarChooseLanguage")}</p>
+          <Button
+            onClick={() => i18n.changeLanguage("de")}
+            className="p-4 text-xl text-black w-10 mr-2 h-10"
+            rounded
+            inline
+          >
+            DE
+          </Button>
+          <Button
+            onClick={() => i18n.changeLanguage("en")}
+            className="p-4 text-xl text-black w-10 h-10"
+            rounded
+            inline
+          >
+            EN
+          </Button>
           <p>{t("sidebarAbout")}</p>
           <p>{t("sidebarLegal")}</p>
+          <LogoPrototypeFund />
+          <LogoBMBF />
+          <LogoDigitalwarenkombinat />
         </Block>
       </Page>
     </Panel>

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -21,6 +21,7 @@
     "selectionUnknown": "Unbekannt",
     "selectionYear": "Entstehungsjahr:",
     "sidebarAbout": "Über uns",
+    "sidebarChooseLanguage": "Sprache",
     "sidebarLegal": "Impressum",
     "start": "Start",
     "startButtonText": "Los geht's!",

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -21,6 +21,7 @@
     "selectionUnknown": "Unknown",
     "selectionYear": "Year of creation:",
     "sidebarAbout": "About",
+    "sidebarChooseLanguage": "Language",
     "sidebarLegal": "Legal",
     "start": "Start",
     "startButtonText": "Let's go!",