44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { AppStaticProps } from "graphql/getAppStaticProps";
|
|
import { prettyLanguage } from "helpers/formatters";
|
|
import { Immutable } from "helpers/types";
|
|
import { Dispatch, Fragment, SetStateAction } from "react";
|
|
import { ToolTip } from "../ToolTip";
|
|
import { Button } from "./Button";
|
|
|
|
interface Props {
|
|
className?: string;
|
|
languages: AppStaticProps["languages"];
|
|
locales: Map<string, number>;
|
|
localesIndex: number | undefined;
|
|
setLocalesIndex: Dispatch<SetStateAction<number | undefined>>;
|
|
}
|
|
|
|
export function LanguageSwitcher(props: Immutable<Props>): JSX.Element {
|
|
const { locales, className, localesIndex, setLocalesIndex } = props;
|
|
|
|
return (
|
|
<ToolTip
|
|
content={
|
|
<div className={`flex flex-col gap-2 ${className}`}>
|
|
{[...locales].map(([locale, value], index) => (
|
|
<Fragment key={index}>
|
|
{locale && (
|
|
<Button
|
|
active={value === localesIndex}
|
|
onClick={() => setLocalesIndex(value)}
|
|
>
|
|
{prettyLanguage(locale, props.languages)}
|
|
</Button>
|
|
)}
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
}
|
|
>
|
|
<Button badgeNumber={locales.size > 1 ? locales.size : undefined}>
|
|
<span className="material-icons">translate</span>
|
|
</Button>
|
|
</ToolTip>
|
|
);
|
|
}
|