mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-04-25 15:56:19 -05:00
af3a654595
* Variables rearranged * Make patron.json empty again * Fix styles.css * Working prototype * Table legible color * UI furthened * Set opaque theme color with custom colors * Control Color Selector with buttons * Show info if can't edit colors * borzoic can also edit colors * Add migration * Can send colors to backend * Edit existing colors * Use new layering strat for footer * useMutation custom hook * Footer adjusted text color * Reset style after profile visit * Set squid color after page load * Mutate user after color selection
81 lines
2.3 KiB
TypeScript
81 lines
2.3 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 { CSSVariables } from "utils/CSSVariables";
|
|
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();
|
|
|
|
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 !important", color: "black" }
|
|
: { bg: "black !important", color: "white" }
|
|
}
|
|
borderRadius={isMobile ? "50%" : "0"}
|
|
size={isMobile ? "lg" : "sm"}
|
|
height="50px"
|
|
display={isMobile ? "flex" : ["none", null, null, "flex"]}
|
|
/>
|
|
<MenuList
|
|
bg={CSSVariables.secondaryBgColor}
|
|
color={CSSVariables.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;
|