fumadocs-ui
Version:
The Radix UI version of Fumadocs UI
44 lines (43 loc) • 1.93 kB
JavaScript
"use client";
import { cn } from "../../../utils/cn.js";
import { buttonVariants } from "../../../components/ui/button.js";
import { useI18n } from "../../../contexts/i18n.js";
import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { useTranslations } from "@fuma-translate/react";
//#region src/layouts/shared/slots/language-select.tsx
function LanguageSelect({ className, variant = "ghost", children, ...rest }) {
const context = useI18n();
const t = useTranslations({ note: "language switcher" });
if (!context.locales) throw new Error("Missing `<I18nProvider />`");
const chooseLanguage = t("Choose a language");
return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
"aria-label": t("Choose a language", { note: "aria-label" }),
className: cn(buttonVariants({ variant }), "gap-1.5 p-1.5 data-[state=open]:bg-fd-accent", className),
...rest,
children
}), /* @__PURE__ */ jsxs(PopoverContent, {
className: "flex flex-col gap-0.5 p-1",
children: [/* @__PURE__ */ jsx("p", {
className: "p-2 text-xs font-medium text-fd-muted-foreground",
children: chooseLanguage
}), context.locales.map((item) => /* @__PURE__ */ jsx("button", {
type: "button",
className: cn("px-2 py-1.5 text-start text-sm rounded-lg transition-colors", item.locale === context.locale ? "bg-fd-primary/10 text-fd-primary" : "text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground"),
onClick: () => {
context.onChange?.(item.locale);
},
children: item.name
}, item.locale))]
})] });
}
function LanguageSelectText(props) {
const { locales, locale } = useI18n();
const text = locales?.find((item) => item.locale === locale)?.name;
return /* @__PURE__ */ jsx("span", {
...props,
children: text
});
}
//#endregion
export { LanguageSelect, LanguageSelectText };