مبدّل اللغة

"use client";

import { useState } from "react";
import { LanguageSwitcher } from "@/components/ui/language-switcher";

const locales = [{ code: "en" }, { code: "fr" }, { code: "es" }, { code: "ja" }, { code: "ar" }];

export function LocaleSwitcher() {
  const [locale, setLocale] = useState("en");

  return (
    <LanguageSwitcher
      locales={locales} // only `code` is required, labels and flags are auto-resolved
      value={locale} // omit for uncontrolled, use defaultValue instead
      onValueChange={setLocale}
      label="native" // or "english" (default)
      showFlags
    />
  );
}

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { LanguageSwitcher } from "@/components/ui/language-switcher";
import { useBabelize } from "@babelize/sdk/react";

const locales = [
  { code: "en", label: "English", flag: "🇺🇸" },
  { code: "fr", label: "Français", flag: "🇫🇷" },
  { code: "es", label: "Español", flag: "🇪🇸" },
  { code: "de", label: "Deutsch", flag: "🇩🇪" },
  { code: "ja", label: "日本語", flag: "🇯🇵" },
  { code: "ar", label: "العربية", flag: "🇸🇦" },
];

export function LocaleSwitcher() {
  const router = useRouter();
  const { locale, setLocale } = useBabelize();

  return (
    <LanguageSwitcher
      locales={locales}
      value={locale}
      onValueChange={(code) => {
        setLocale(code);
        router.push(`/${code}`);
      }}
    />
  );
}

"use client";

import { useRouter } from "next/navigation";
import { LanguageSwitcher } from "@/components/ui/language-switcher";

export function LocaleSwitcher() {
  const router = useRouter();

  return (
    <LanguageSwitcher
      locales={[{ code: "en" }, { code: "fr" }]}
      defaultValue="en"
      onValueChange={(code) => router.push(`/${code}`)}
    />
  );
}

"use client";

import { useTranslation } from "react-i18next";
import { LanguageSwitcher } from "@/components/ui/language-switcher";

export function LocaleSwitcher() {
  const { i18n } = useTranslation();

  return (
    <LanguageSwitcher
      locales={[{ code: "en" }, { code: "fr" }]}
      value={i18n.language}
      onValueChange={(code) => i18n.changeLanguage(code)}
    />
  );
}

"use client";

import { LanguageSwitcher } from "@/components/ui/language-switcher";

export default function App() {
  return (
    <LanguageSwitcher
      locales={[{ code: "en" }, { code: "fr" }, { code: "es" }]}
      defaultValue="en"
      label="native"
      showFlags
    />
  );
}

<LanguageSwitcher
  locales={locales}
  variant="ghost"
  size="sm"
  align="end"
  classNames={{ content: "w-64", item: "py-2" }}
  renderOption={(locale, { label, flag, selected }) => (
    <>
      <span className="text-base leading-none">{flag}</span>
      <span className="flex-1">{label}</span>
      <span className="text-xs text-muted-foreground">{selected ? "Current" : locale.code}</span>
    </>
  )}
/>

"use client";

import { LanguageSwitcher } from "@/components/ui/language-switcher";

export default function App() {
  return (
    <LanguageSwitcher
      locales={[{ code: "en" }, { code: "fr" }, { code: "es" }]}
      defaultValue="fr"
      label="native"
      labels={{
        searchPlaceholder: "Rechercher une langue…",
        searchLabel: "Rechercher une langue",
        clearSearch: "Effacer la recherche",
        emptyMessage: "Aucune langue trouvée.",
        listbox: "Choisir la langue",
        current: (name) => `Langue actuelle : ${name}`,
      }}
    />
  );
}

<LanguageSwitcher
  locales={[{ code: "xyz", label: "My Language", flag: "🏴" }]}
  defaultValue="xyz"
/>