79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { Languages } from "lucide-react";
|
|
// import twemoji from "twemoji";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
} from "@/components/ui/select";
|
|
import Twemoji from "react-twemoji";
|
|
import { useMediaQuery } from "@/hooks/useMediaQuery";
|
|
|
|
interface PickLanguageProps {
|
|
onLanguagePicked: (languagePicked: string) => void;
|
|
allLanguages: ILanguage[];
|
|
languageState: string;
|
|
isDisabled?: boolean;
|
|
}
|
|
|
|
const PickLanguage: React.FC<PickLanguageProps> = ({
|
|
onLanguagePicked,
|
|
allLanguages,
|
|
languageState,
|
|
isDisabled,
|
|
}) => {
|
|
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
const languageSelected = allLanguages.find(
|
|
(language) => language.code === languageState
|
|
);
|
|
|
|
const FlagComponent = ({ flag }: { flag: string | undefined }) => {
|
|
return (
|
|
<div className="w-5 h-5 flex items-center justify-center">
|
|
<Twemoji
|
|
options={{ className: "twemoji w-5 h-5 flex-shrink-0" }}
|
|
>
|
|
{flag}
|
|
</Twemoji>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 mr-1">
|
|
<Select
|
|
onValueChange={(value: string) => {
|
|
onLanguagePicked(value as string);
|
|
}}
|
|
defaultValue={languageState}
|
|
>
|
|
<SelectTrigger
|
|
disabled={isDisabled}
|
|
className="rounded-full gap-2 w-fit [&>:last-child]:hidden sm:[&>:last-child]:block"
|
|
>
|
|
<Languages size={18} />
|
|
<FlagComponent flag={languageSelected?.flag} />
|
|
{!isMobile && <span>{languageSelected?.name}</span>}
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{allLanguages.map((language) => (
|
|
<SelectItem
|
|
key={language.language_id}
|
|
value={language.code}
|
|
className="p-2 flex justify-start"
|
|
>
|
|
<div className="flex flex-row items-center gap-2 pl-6">
|
|
<FlagComponent flag={language.flag} />
|
|
<div className="flex flex-col text-sm items-start">
|
|
<p>{language.name}</p>
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PickLanguage;
|