Add locale picker to app header

This commit is contained in:
Jamie Curnow 2023-03-05 22:36:52 +10:00
parent 0244187c29
commit cb3f0ec9b4
No known key found for this signature in database
GPG Key ID: FFBB624C43388E9E
2 changed files with 12 additions and 9 deletions

View File

@ -3,6 +3,7 @@ import {
Box,
Menu,
MenuButton,
MenuButtonProps,
MenuList,
MenuItem,
} from "@chakra-ui/react";
@ -16,29 +17,30 @@ import {
} from "locale";
interface LocalPickerProps {
/**
* On change handler
*/
onChange?: any;
/**
* Class
*/
className?: string;
background?: "normal" | "transparent";
}
function LocalePicker({ onChange, className }: LocalPickerProps) {
function LocalePicker({ onChange, className, background }: LocalPickerProps) {
const { locale, setLocale } = useLocaleState();
const additionalProps: Partial<MenuButtonProps> = {};
if (background === "transparent") {
additionalProps["backgroundColor"] = "transparent";
}
const changeTo = (lang: string) => {
changeLocale(lang);
setLocale(lang);
onChange && onChange(locale);
location.reload();
};
return (
<Box className={className}>
<Menu>
<MenuButton as={Button}>
<MenuButton as={Button} {...additionalProps}>
<Flag countryCode={getFlagCodeForLocale(locale)} />
</MenuButton>
<MenuList>

View File

@ -17,7 +17,7 @@ import {
useColorModeValue,
useDisclosure,
} from "@chakra-ui/react";
import { ThemeSwitcher } from "components";
import { LocalePicker, ThemeSwitcher } from "components";
import { useAuthState } from "context";
import { useUser } from "hooks";
import { intl } from "locale";
@ -67,6 +67,7 @@ function NavigationHeader({
</HStack>
<HStack>
<ThemeSwitcher background="transparent" />
<LocalePicker className="text-right" background="transparent" />
<Box pl={2}>
<Menu>
<MenuButton