Enhance UI components by updating button text color in CustomHeader for better visibility, adding ThemeSwitcher to Footer for improved user experience, and refactoring LanguageSwitcher to use a button dropdown for language selection with country flags.

Author: goldflag

docs/src/components/CountryFlag.tsx

@@ -0,0 +1,13 @@
+import * as CountryFlags from "country-flag-icons/react/3x2";
+import React from "react";
+
+export function CountryFlag({
+  country,
+  className,
+}: {
+  country: string;
+  className?: string;
+}) {
+  const Flag = CountryFlags[country as keyof typeof CountryFlags];
+  return Flag ? <Flag className={className ?? "w-5"} /> : null;
+}

docs/src/components/CustomHeader.tsx

@@ -111,7 +111,7 @@ export function CustomHeader() {
             <AppLink href="https://app.rybbit.io/signup" target="_blank">
               <button
                 onClick={() => trackAdEvent("signup", { location: "header" })}
-                className="bg-emerald-600 hover:bg-emerald-500 text-neutral-900 dark:text-white text-sm font-medium px-3 py-1.5 rounded-md transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-200 focus:ring-opacity-50"
+                className="bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-medium px-3 py-1.5 rounded-md transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-200 focus:ring-opacity-50"
               >
                 {t("Sign up")}
               </button>

docs/src/components/Footer.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useExtracted } from "next-intl";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
+import { ThemeSwitcher } from "./ThemeSwitcher";
 
 export function Footer() {
   const t = useExtracted();
@@ -234,7 +235,8 @@ export function Footer() {
         <div className="pt-8 border-t border-neutral-200 dark:border-neutral-800">
           <div className="flex flex-col md:flex-row items-center justify-between gap-4">
             <div className="text-sm text-neutral-400">{t("© {year} Rybbit. All rights reserved.", { year: String(new Date().getFullYear()) })}</div>
-            <div className="text-sm text-neutral-400 space-x-4">
+            <div className="text-sm text-neutral-400 space-x-4 flex items-center">
+              <ThemeSwitcher />
               <LanguageSwitcher />
               {t("Made with ❤️ by frogs")}{" "}
               <a href="https://tomato.gg" target="_blank" title="Tomato.gg">

docs/src/components/LanguageSwitcher.tsx

@@ -1,43 +1,82 @@
 "use client";
 
+import { useState, useRef, useEffect } from "react";
 import { useLocale } from "next-intl";
 import { usePathname, useRouter } from "@/i18n/navigation";
 import { routing } from "@/i18n/routing";
+import { CountryFlag } from "./CountryFlag";
 
 const LOCALE_OPTIONS = [
-  { value: "en", label: "English", flag: "🇺🇸" },
-  { value: "de", label: "Deutsch", flag: "🇩🇪" },
-  { value: "fr", label: "Français", flag: "🇫🇷" },
-  { value: "zh", label: "简体中文", flag: "🇨🇳" },
-  { value: "es", label: "Español", flag: "🇪🇸" },
-  { value: "pl", label: "Polski", flag: "🇵🇱" },
-  { value: "it", label: "Italiano", flag: "🇮🇹" },
-  { value: "ko", label: "한국어", flag: "🇰🇷" },
-  { value: "pt", label: "Português", flag: "🇧🇷" },
-  { value: "ja", label: "日本語", flag: "🇯🇵" },
-] as const satisfies { value: (typeof routing.locales)[number]; label: string; flag: string }[];
+  { value: "en", label: "English", country: "US" },
+  { value: "de", label: "Deutsch", country: "DE" },
+  { value: "fr", label: "Français", country: "FR" },
+  { value: "zh", label: "简体中文", country: "CN" },
+  { value: "es", label: "Español", country: "ES" },
+  { value: "pl", label: "Polski", country: "PL" },
+  { value: "it", label: "Italiano", country: "IT" },
+  { value: "ko", label: "한국어", country: "KR" },
+  { value: "pt", label: "Português", country: "BR" },
+  { value: "ja", label: "日本語", country: "JP" },
+] as const satisfies {
+  value: (typeof routing.locales)[number];
+  label: string;
+  country: string;
+}[];
 
 export function LanguageSwitcher() {
   const currentLocale = useLocale();
   const router = useRouter();
   const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
 
-  function handleLocaleChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    router.replace(pathname, { locale: e.target.value });
+  const current = LOCALE_OPTIONS.find((o) => o.value === currentLocale) ?? LOCALE_OPTIONS[0];
+
+  function handleLocaleChange(locale: string) {
+    router.replace(pathname, { locale });
+    setOpen(false);
   }
 
+  useEffect(() => {
+    function onClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);
+
   return (
-    <select
-      value={currentLocale}
-      onChange={handleLocaleChange}
-      className="bg-transparent text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer border border-neutral-300 dark:border-neutral-700 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-neutral-400"
-      aria-label="Select language"
-    >
-      {LOCALE_OPTIONS.map((option) => (
-        <option key={option.value} value={option.value}>
-          {option.flag} {option.label}
-        </option>
-      ))}
-    </select>
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-2 bg-transparent text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors cursor-pointer border border-neutral-300 dark:border-neutral-700 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-neutral-400"
+        aria-label="Select language"
+      >
+        <CountryFlag country={current.country} className="w-4" />
+        {current.label}
+      </button>
+      {open && (
+        <div className="absolute right-0 bottom-full mb-1 z-50 min-w-[160px] rounded-md border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-lg py-1">
+          {LOCALE_OPTIONS.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => handleLocaleChange(option.value)}
+              className={`flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors ${
+                option.value === currentLocale
+                  ? "text-neutral-900 dark:text-white font-medium"
+                  : "text-neutral-600 dark:text-neutral-400"
+              }`}
+            >
+              <CountryFlag country={option.country} className="w-4" />
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
   );
 }