Function SelectLanguage

frontend/src/components/SelectGroup/SelectLanguage.tsx:5–73

()

import { useTranslation } from "react-i18next";

const SelectLanguage: React.FC = () => {
  const [selectedOption, setSelectedOption] = useState<string>("");
  const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);
  const { t, i18n } = useTranslation("setting");
  const changeTextColor = () => {
    setIsOptionSelected(true);
  };

  let lang = localStorage.getItem("langSelect") || "en";

  const handleChangeLanguage = async (e) => {
    localStorage.setItem("langSelect", e.target.value);
    await i18n.changeLanguage(e.target.value);
    console.log("OK", localStorage.getItem("langSelect"));
  };

  return (
    <div className="mb-4.5">
      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
        {" "}
        {t("default_language")} <span className="text-meta-1">*</span>
      </label>

      <div className="relative z-20 bg-transparent dark:bg-form-input">
        <select
          value={lang}
          onChange={(e) => {
            setSelectedOption(e.target.value);
            changeTextColor();
            handleChangeLanguage(e);
          }}
          className={`relative z-20 w-full appearance-none rounded border border-stroke bg-transparent px-5 py-3 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary ${
            isOptionSelected ? "text-black dark:text-white" : ""
          }`}
        >
          <option value="en" className="text-body dark:text-bodydark">
            English
          </option>
          <option value="cn" className="text-body dark:text-bodydark">
            中文 (简体)
          </option>
          <option value="zh-CN" className="text-body dark:text-bodydark">
            中文 (繁體)
          </option>
        </select>

        <span className="absolute right-4 top-1/2 z-30 -translate-y-1/2">
          <svg
            className="fill-current"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g opacity="0.8">
              <path
                fillRule="evenodd"