...

...

...

...

...

src/app/folders/[folder_id]/AddTextPairModal.tsx

@@ -1,7 +1,8 @@
-import LightButton from "@/components/ui/buttons/LightButton";
+import { LightButton } from "@/components/ui/buttons";
 import Input from "@/components/ui/Input";
+import { LocaleSelector } from "@/components/ui/LocaleSelector";
 import { X } from "lucide-react";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 
 interface AddTextPairModalProps {
@@ -23,23 +24,23 @@ export default function AddTextPairModal({
   const t = useTranslations("folder_id");
   const input1Ref = useRef<HTMLInputElement>(null);
   const input2Ref = useRef<HTMLInputElement>(null);
-  const input3Ref = useRef<HTMLInputElement>(null);
-  const input4Ref = useRef<HTMLInputElement>(null);
+  const [locale1, setLocale1] = useState("en-US");
+  const [locale2, setLocale2] = useState("zh-CN");
+
   if (!isOpen) return null;
 
   const handleAdd = () => {
     if (
       !input1Ref.current?.value ||
       !input2Ref.current?.value ||
-      !input3Ref.current?.value ||
-      !input4Ref.current?.value
+      !locale1 ||
+      !locale2
     )
       return;
 
     const text1 = input1Ref.current.value;
     const text2 = input2Ref.current.value;
-    const locale1 = input3Ref.current.value;
-    const locale2 = input4Ref.current.value;
+
     if (
       typeof text1 === "string" &&
       typeof text2 === "string" &&
@@ -55,6 +56,7 @@ export default function AddTextPairModal({
       input2Ref.current.value = "";
     }
   };
+
   return (
     <div
       className="fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center z-50"
@@ -83,19 +85,11 @@ export default function AddTextPairModal({
           </div>
           <div>
             {t("locale1")}
-            <Input
-              ref={input3Ref}
-              className="w-full"
-              placeholder="en-US"
-            ></Input>
+            <LocaleSelector value={locale1} onChange={setLocale1} />
           </div>
           <div>
             {t("locale2")}
-            <Input
-              ref={input4Ref}
-              className="w-full"
-              placeholder="zh-CN"
-            ></Input>
+            <LocaleSelector value={locale2} onChange={setLocale2} />
           </div>
         </div>
         <LightButton onClick={handleAdd}>{t("add")}</LightButton>