55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { getIsRtl } from "@/redux/reducer/languageSlice";
|
|
import { t } from "@/utils";
|
|
import { useSelector } from "react-redux";
|
|
|
|
const AdLanguageSelector = ({
|
|
langId,
|
|
setLangId,
|
|
languages,
|
|
setTranslations,
|
|
}) => {
|
|
const isRTL = useSelector(getIsRtl);
|
|
|
|
const handleLangChange = (newId) => {
|
|
setLangId(newId);
|
|
setTranslations((t) => ({
|
|
...t,
|
|
[newId]: t[newId] || {},
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<p className="whitespace-nowrap text-sm font-medium hidden lg:block">
|
|
{t("selectLanguage")}
|
|
</p>
|
|
<Select value={langId} onValueChange={handleLangChange}>
|
|
<SelectTrigger className="gap-2">
|
|
<SelectValue placeholder="Select language" />
|
|
</SelectTrigger>
|
|
<SelectContent align={isRTL ? "start" : "end"}>
|
|
<SelectGroup>
|
|
{languages &&
|
|
languages.length > 0 &&
|
|
languages.map((lang) => (
|
|
<SelectItem key={lang.id} value={lang.id}>
|
|
{lang.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdLanguageSelector;
|