src/components/nav-container.tsx

@@ -14,18 +14,17 @@ export function NavContainer({ children, title, }: { children: React.ReactNode,
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           <div className="flex gap-4">
-            <LanguageSelector />
             <Link href="/" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
               <h1>{title}</h1>
             </Link>
           </div>
           <div className="flex items-center">
             {children}
+            <LanguageSelector />
             <Button
               variant="ghost"
               size="icon"
               onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              className="ml-4"
             >
               {theme === "dark" ? (
                 <SunIcon className="h-5 w-5" />

src/components/ui/language-selector.tsx

@@ -3,6 +3,8 @@
 import { Lang } from "@/i18n/locales";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
+import { Button } from "./button";
+import { LanguagesIcon } from "lucide-react";
 
 
 export const LanguageSelector = () => {
@@ -15,10 +17,22 @@ export const LanguageSelector = () => {
   }
 
   const lang = params?.locale || 'pl';
-  const changedLang = pathname.replace(`/${lang}`, `/${replacements[lang]}`)
+  const otherLang = replacements[lang];
+  const changedLang = pathname.replace(`/${lang}`, `/${otherLang}`)
 
-  if (lang === 'pl') return (<>
+  return (<>
-    <Link suppressHydrationWarning className="pt-1" href={changedLang}>🇬🇧</Link></>);
+      <Button
-  if (lang === 'en') return (<>
+        variant="ghost"
-    <Link suppressHydrationWarning className="pt-1" href={changedLang}>🇵🇱</Link></>);
+        size="icon"
+        className="md:ml-6 w-15"
+      >
+        <Link
+          href={changedLang}
+          className="flex space-x-2 items-center"
+        >
+          <LanguagesIcon className="h-5 w-5 mr-1" />
+          <span>{otherLang.toUpperCase()}</span>
+        </Link>
+      </Button>
+  </>);
 };