From af1a4e6c74a89a082a532ed5f553851d1c4be44e Mon Sep 17 00:00:00 2001
From: Serge Bazanski <q3k@q3k.org>
Date: Sun, 13 Apr 2025 17:00:27 +0200
Subject: [PATCH] look: move language selector to RHS, don't use country flags

The language selection being a flag never sat right wight me:

 1. Its positioning next to 'CEBULACAMP' implied more that it's a
    cebula.camp logo or intrinsic flag of the event or something.
 2. I think it's the first site I've ever seen that has a language
    selector on the left hand side of the navigation bar.
 3. Using country flags as language icons is wrong [1].

[1] - just ask the Swiss or the Belgians.
---
 src/components/nav-container.tsx        |  3 +--
 src/components/ui/language-selector.tsx | 24 +++++++++++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/nav-container.tsx b/src/components/nav-container.tsx
index 79c655a..1a661e8 100644
--- a/src/components/nav-container.tsx
+++ b/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" />
diff --git a/src/components/ui/language-selector.tsx b/src/components/ui/language-selector.tsx
index 842ad97..6bd5914 100644
--- a/src/components/ui/language-selector.tsx
+++ b/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 (<>
-    <Link suppressHydrationWarning className="pt-1" href={changedLang}>🇬🇧</Link></>);
-  if (lang === 'en') return (<>
-    <Link suppressHydrationWarning className="pt-1" href={changedLang}>🇵🇱</Link></>);
+  return (<>
+      <Button
+        variant="ghost"
+        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>
+  </>);
 };
-- 
2.47.1