Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | import { IconButton, Stack } from "@chakra-ui/react";
import type { FunctionComponent } from "react";
import { PACKAGE_ANALYTICS } from "./constants";
import { LanguageSupportTooltip } from "../../components/LanguageSupportTooltip";
import {
Language,
TEMP_SUPPORTED_LANGUAGES,
LANGUAGE_RENDER_MAP,
LANGUAGES,
} from "../../constants/languages";
import { clickEvent, useAnalytics } from "../../contexts/Analytics";
export interface LanguageBarProps {
targetLanguages: readonly Language[];
selectedLanguage: Language;
setSelectedLanguage: (lang: Language) => void;
}
export const LanguageBar: FunctionComponent<LanguageBarProps> = ({
targetLanguages,
selectedLanguage,
setSelectedLanguage,
}) => {
const { trackCustomEvent } = useAnalytics();
return (
<Stack
align="center"
data-testid="language-bar"
direction="row"
spacing={2}
>
{[...targetLanguages]
.sort(
(left, right) => LANGUAGES.indexOf(left) - LANGUAGES.indexOf(right)
)
.map((language: Language) => {
const isDisabled = !TEMP_SUPPORTED_LANGUAGES.has(language);
const isSelected = language === selectedLanguage;
const { icon: LangIcon } = LANGUAGE_RENDER_MAP[language];
const onClick = () => {
if (isSelected) return;
trackCustomEvent(
clickEvent({
name: PACKAGE_ANALYTICS.LANGUAGE.eventName(language),
})
);
setSelectedLanguage(language);
};
return (
<LanguageSupportTooltip key={language} language={language}>
<IconButton
aria-label={`Select ${language} icon`}
bg="bgSecondary"
border="base"
borderColor={isSelected ? "brand.500" : "borderColor"}
borderRadius="lg"
boxShadow="base"
colorScheme="brand"
cursor={isDisabled ? "not-allowed" : "pointer"}
data-testid={`language-${language}`}
disabled={isDisabled}
icon={
<LangIcon
aria-label={`${language}-icon`}
borderRadius="sm"
height={[4, 5, 6]}
width={[4, 5, 6]}
/>
}
onClick={onClick}
p={1}
variant="outline"
w="max-content"
/>
</LanguageSupportTooltip>
);
})}
</Stack>
);
};
|