mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-04-10 20:30:53 -05:00
1589b84c4b
* side layout initial * add elements to side nav * side buttons links * remove clog * calendar page initial * position sticky working * x trends page initial * new table * same mode selector * mobile friendly table * no underline for nav links * xsearch * x trends page outlined * sr initial * relocate calendar components * calendar fix flex * topnav fancier look * layout looking good edition * relocate xtrends * xtrends remove linecharts * x trends new * calender page new * delete headbanner, new login * remove calendar stuff from api * rename stuff in utils * fix user item margin * new home page initial * remove page concept * no pointer xtrends * remove xrank from app * xtrends service * move fa from app * move plus * maps tweaks * new table for plus history * navigational sidebar flex tweaks * builds page * analyzer * user page * free agents * plans * remove mx * tweaks * change layout to grid * home page finalized * mobile nav * restrict main content width * tweaks style * language switcher * container in css * sticky nav * use duplicate icons for now * change mapsketch width to old * chara tour vid * borzoic icons
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import {
|
|
IconButton,
|
|
Menu,
|
|
MenuButton,
|
|
MenuItemOption,
|
|
MenuList,
|
|
MenuOptionGroup,
|
|
useColorMode,
|
|
} from "@chakra-ui/react";
|
|
import { t } from "@lingui/macro";
|
|
import { useLingui } from "@lingui/react";
|
|
import { useMyTheme } from "hooks/common";
|
|
import React from "react";
|
|
import { FiGlobe } from "react-icons/fi";
|
|
import { activateLocale } from "utils/i18n";
|
|
|
|
export const languages = [
|
|
{ code: "de", name: "Deutsch" },
|
|
{ code: "en", name: "English" },
|
|
{ code: "es", name: "Español" },
|
|
{ code: "fr", name: "Français" },
|
|
{ code: "it", name: "Italiano" },
|
|
{ code: "nl", name: "Nederlands" },
|
|
{ code: "pt", name: "Português" },
|
|
{ code: "sv", name: "Svenska" },
|
|
{ code: "el", name: "Ελληνικά" },
|
|
{ code: "ru", name: "Русский" },
|
|
{ code: "ja", name: "日本語" },
|
|
{ code: "ko", name: "한국어" },
|
|
//{ code: "zh", name: "繁體中文" },
|
|
{ code: "he", name: "עברית" },
|
|
] as const;
|
|
|
|
export const LanguageSwitcher = ({ isMobile }: { isMobile?: boolean }) => {
|
|
const { colorMode } = useColorMode();
|
|
const { i18n } = useLingui();
|
|
const { secondaryBgColor, textColor } = useMyTheme();
|
|
|
|
return (
|
|
<Menu>
|
|
<MenuButton
|
|
as={IconButton}
|
|
data-cy="color-mode-toggle"
|
|
aria-label="Switch language"
|
|
variant="ghost"
|
|
color="current"
|
|
icon={<FiGlobe />}
|
|
_hover={
|
|
colorMode === "dark"
|
|
? { bg: "white", color: "black" }
|
|
: { bg: "black", color: "white" }
|
|
}
|
|
borderRadius={isMobile ? "50%" : "0"}
|
|
size={isMobile ? "lg" : "sm"}
|
|
display={isMobile ? "flex" : ["none", null, null, "flex"]}
|
|
/>
|
|
<MenuList bg={secondaryBgColor} color={textColor}>
|
|
<MenuOptionGroup
|
|
title={t`Choose language`}
|
|
value={i18n.locale}
|
|
onChange={(newLocale) => {
|
|
window.localStorage.setItem("locale", newLocale as string);
|
|
activateLocale(newLocale as string);
|
|
}}
|
|
>
|
|
{languages.map((lang) => (
|
|
<MenuItemOption key={lang.code} value={lang.code}>
|
|
{lang.name}
|
|
</MenuItemOption>
|
|
))}
|
|
</MenuOptionGroup>
|
|
</MenuList>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default LanguageSwitcher;
|