easy

web/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

web/src/components/utils/LanguageSwitch.tsx

@@ -1,21 +1,27 @@
 "use client";
-
 import { usePathname, useRouter } from "@/navigation";
 import { Button } from "@nextui-org/button";
 import { SwitchProps } from "@nextui-org/switch";
+import deFlag from "@public/images/flags/de.svg";
+import enFlag from "@public/images/flags/en.svg";
 import Image from "next/image";
 import React from "react";
 
 interface LanguageSwitchProps {
   className?: string;
   classNames?: SwitchProps["classNames"];
-  locale?: string;
+  locale?: "de" | "en";
 }
 
+const flagImages = {
+  en: enFlag,
+  de: deFlag,
+};
+
 export const LanguageSwitch: React.FC<LanguageSwitchProps> = ({ locale }) => {
   const pathname = usePathname();
   const router = useRouter();
-
+  const currentFlag = flagImages[locale || "en"];
   return (
     <Button
       variant="flat"
@@ -25,12 +31,7 @@ export const LanguageSwitch: React.FC<LanguageSwitchProps> = ({ locale }) => {
         router.replace(pathname, { locale: locale === "en" ? "de" : "en" })
       }
     >
-      <Image
-        src={require(`@public/images/flags/${locale}.svg`)}
-        alt={`${locale}`}
-        width={30}
-        height={30}
-      />
+      <Image src={currentFlag} alt={`${locale} flag`} width={30} height={30} />
     </Button>
   );
 };