You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.3 KiB
66 lines
1.3 KiB
import { BuildKey } from "@/utilities";
|
|
import { Badge, Group, Text, TextProps } from "@mantine/core";
|
|
import { FunctionComponent, useMemo } from "react";
|
|
|
|
type LanguageTextProps = TextProps<"div"> & {
|
|
value: Language.Info;
|
|
long?: boolean;
|
|
};
|
|
|
|
declare type LanguageComponent = {
|
|
Text: typeof LanguageText;
|
|
List: typeof LanguageList;
|
|
};
|
|
|
|
const LanguageText: FunctionComponent<LanguageTextProps> = ({
|
|
value,
|
|
long,
|
|
...props
|
|
}) => {
|
|
const result = useMemo(() => {
|
|
let lang = value.code2;
|
|
let hi = ":HI";
|
|
let forced = ":Forced";
|
|
if (long) {
|
|
lang = value.name;
|
|
hi = " HI";
|
|
forced = " Forced";
|
|
}
|
|
|
|
let res = lang;
|
|
if (value.hi) {
|
|
res += hi;
|
|
} else if (value.forced) {
|
|
res += forced;
|
|
}
|
|
return res;
|
|
}, [value, long]);
|
|
|
|
return (
|
|
<Text inherit {...props}>
|
|
{result}
|
|
</Text>
|
|
);
|
|
};
|
|
|
|
type LanguageListProps = {
|
|
value: Language.Info[];
|
|
};
|
|
|
|
const LanguageList: FunctionComponent<LanguageListProps> = ({ value }) => {
|
|
return (
|
|
<Group spacing="xs">
|
|
{value.map((v) => (
|
|
<Badge key={BuildKey(v.code2, v.code2, v.hi)}>{v.name}</Badge>
|
|
))}
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
const Components: LanguageComponent = {
|
|
Text: LanguageText,
|
|
List: LanguageList,
|
|
};
|
|
|
|
export default Components;
|