Untitled
unknown
plain_text
7 months ago
2.7 kB
2
Indexable
Never
export function LanguageSelector({ isMobile, onClick }: LanguageSelectorProps) { const { header } = useShopStructure(); const languageListAll = useHistoricalSetting(header?.languageList) as LanguageDto[]; const languageList: LanguageDto[] = languageListAll.filter(x => x.allowInShop); const [showMenu, setShowMenu] = useState(false); const { selectedLanguage, setSelectedLanguage, setStaticText } = useLanguage(); const menuRef = useClickAwayRef(() => setShowMenu(false)); const selectedLanguageObject: LanguageDto = languageList.find(x => x.name === selectedLanguage); const changeLanguage = async (name, code) => { setSelectedLanguage({ name, code }); setShowMenu(false); const fetchedStaticText = await fetcher<object>(buildEndpoint(Path.getTranslation(name))); setStaticText(fetchedStaticText); }; if (isMobile) { return ( <span> {languageList.map(({ label, name, code, img }) => ( <Button key={label} className={tw({ 'mx-3 border-2 border-transparent px-0.5': true, '!border-[color:var(--primary)]': selectedLanguage && selectedLanguage === name, })} onClick={() => { changeLanguage(name, code); onClick(); }} > <FlagIcon imgSrc={img} name={name} label={label} /> </Button> ))} </span> ); } const dropDownOpts = languageList.map(({ label, name, code, img }) => ( <Button key={label} className={`${dropDownClasses} p-3 flex items-center justify-between hover:text-[color:var(--primary)]`} onClick={() => changeLanguage(name, code)} > <span className={tw('flex items-center')}> <FlagIcon imgSrc={img} name={name} label={label} className="mr-3" /> <span>{label}</span> </span> {selectedLanguage && selectedLanguage === name ? ( <Icon color={'var(--primary)'} className={tw('ml-3')} icon={faCheck} /> ) : null} </Button> )); const menu = showMenu && ( <div className={tw( 'w-full md:w-fit text-center fixed lg:absolute right-0 top-[60px] lg:top-[70px]', 'bg-[color:var(--white)] text-[color:var(--text-color)] drop-shadow-lg rounded', 'z-10', 'text-center', )} > {dropDownOpts} </div> ); return ( <span className={tw('m-auto hidden lg:inline-flex ml-5')} ref={menuRef}> <FlagIcon imgSrc={selectedLanguageObject.img} name={selectedLanguageObject.name} onClick={() => setShowMenu(!showMenu)} label={selectedLanguageObject.label} /> {menu} </span> ); }