ldc-ovoteam/resources/ts/back/Components/Layout/Settings/Sections/Languages.tsx

import { useForm } from "@inertiajs/react";
import { type SubmitEvent } from "react";

import type { ConfigBackend } from "@/back/types/global";
import { Button } from "@/components/ui/button";
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

export default function Languages(
  appEnv: AppEnv,
  configBackend: ConfigBackend,
) {
  const { locales, locale } = appEnv;
  const { routes } = configBackend;
  const { post, setData } = useForm({
    lang: "system",
  });
  const transLanguage = trans("uwil-backend::back.languages");
  const submit = (e: SubmitEvent) => {
    e.preventDefault();
    post(route(`${routes.name}lang.set`));
  };
  const languages = [
    {
      name: trans("Français"),
      locale: "fr",
      flag: "fr",
    },
    {
      name: trans("English"),
      locale: "en",
      flag: "us",
    },
    {
      name: trans("Spain"),
      locale: "es",
      flag: "es",
    },
    {
      name: trans("Germany"),
      locale: "de",
      flag: "de",
    },
    {
      name: trans("Nederlands"),
      locale: "nl",
      flag: "nl",
    },
    {
      name: trans("Polski"),
      locale: "pl",
      flag: "pl",
    },
  ];
  const allowedLocales = languages.filter((language) =>
    locales.includes(language.locale),
  );
  return (
    allowedLocales.length > 1 && (
      <>
        <p className="text-center text-muted-foreground text-sm font-medium leading-7">
          {transLanguage}
        </p>
        <form
          className="grid grid-cols-2 justify-center items-center gap-1"
          onSubmit={submit}
        >
          {allowedLocales.map((language) => {
            return (
              <DropdownMenuItem
                key={language.name}
                className="p-0"
                onSelect={(e) => {
                  e.preventDefault();
                }}
              >
                <Button
                  className={cn("w-full", {
                    "bg-secondary": locale === language.locale,
                  })}
                  variant="ghost"
                  type="submit"
                  onClick={() => {
                    setData("lang", language.locale);
                  }}
                >
                  <span className={`fi fi-${language.flag}`} />
                  {language.name}
                </Button>
              </DropdownMenuItem>
            );
          })}
        </form>
      </>
    )
  );
}