Spaces:
Running
Running
File size: 2,289 Bytes
9cd6ddb |
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 |
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
import { useRef, useState } from "react";
import { useClickAway } from "react-use";
import router, { useRouter } from "next/router";
import FLAGS from "components/langs";
import classNames from "classnames";
export const SelectLanguages = () => {
const { locale } = useRouter();
const ref = useRef<HTMLDivElement>(null);
const [open, setOpen] = useState(false);
useClickAway(ref, () => setOpen(false));
const country = FLAGS.find((flag) => flag.code === locale) ?? FLAGS[0];
const SelectedCountry = country?.icon || (() => null);
return (
<div ref={ref} className="relative">
<div
className="flex items-center gap-2 text-dark-100 text-sm"
onClick={() => setOpen(!open)}
>
<SelectedCountry />
{country.name}
<FontAwesomeIcon
icon={faCaretDown}
className="text-dark-100 transition-all duration-200 w-2 cursor-pointer"
/>
</div>
<div
className={classNames(
"bg-white z-10 rounded-lg shadow-xl p-2 absolute bottom-0 left-0 transform translate-x-10 translate-y-6 max-h-[250px] overflow-auto w-[200px] grid grid-cols-1",
{
"opacity-0 scale-75 pointer-events-none": !open,
}
)}
>
{FLAGS.map((lang) => {
const Component = lang.icon;
return (
<div
key={lang.code}
className={classNames(
"flex items-center gap-2.5 p-2 rounded-lg transition-all duration-200 hover:bg-dark-100 hover:bg-opacity-40 text-dark-200 font-medium text-sm cursor-pointer",
{
"bg-blue !text-white hover:!bg-blue hover:bg-opacity-100":
lang.code === locale,
}
)}
onClick={() => {
// change locale of the app
router.push(router.asPath, router.asPath, {
locale: lang.code,
});
setOpen(false);
}}
>
<Component />
{lang.name}
</div>
);
})}
</div>
</div>
);
};
|