test

Author: zzq0826

src/components/Footer/Subscribe/Subscribe.tsx

@@ -19,8 +19,42 @@ export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
+  const [currentLang, setCurrentLang] = useState(props.lang || i18next.language || "en")
 
-  i18next.changeLanguage(props.lang)
+  useEffect(() => {
+    const initLanguage = async () => {
+      if (props.lang) {
+        // Wait for i18next to be initialized if needed
+        if (!i18next.isInitialized) {
+          await new Promise((resolve) => {
+            if (i18next.isInitialized) {
+              resolve(undefined)
+            } else {
+              const handler = () => {
+                i18next.off("initialized", handler)
+                resolve(undefined)
+              }
+              i18next.on("initialized", handler)
+            }
+          })
+        }
+        // Change language and wait for it to complete
+        await changeLanguage(props.lang)
+        setCurrentLang(props.lang)
+      }
+    }
+    initLanguage()
+
+    // Listen for language changes to trigger re-render
+    const handleLanguageChanged = (lng: string) => {
+      setCurrentLang(lng)
+    }
+    i18next.on("languageChanged", handleLanguageChanged)
+
+    return () => {
+      i18next.off("languageChanged", handleLanguageChanged)
+    }
+  }, [props.lang])
 
   useEffect(() => {
     setCustomMessage("")
@@ -43,17 +77,15 @@ export default function Subscribe(props) {
   }
 
   return (
-    <div className={clsx(styles.container, "dark:bg-dark-highlight")}>
+    <div className={clsx(styles.container, "dark:bg-dark-highlight")} data-lang={currentLang}>
       <div className={styles.subscribeBox}>
         <span className="text-white dark:text-black bg-black dark:bg-white rounded-[50%]">
           <SubscribeSvg></SubscribeSvg>
         </span>
 
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>{ t("landing.NewsletterCTA.title") }</div>
-          <div className={styles.subscribeText}>
-          { t("landing.NewsletterCTA.text") }
-          </div>
+          <div className={styles.subscribeTitle}>{t("landing.NewsletterCTA.title")}</div>
+          <div className={styles.subscribeText}>{t("landing.NewsletterCTA.text")}</div>
         </div>
         <MailchimpSubscribe
           url={url}
@@ -65,7 +97,7 @@ export default function Subscribe(props) {
                 onChange={handleChangeEmail}
                 onClick={() => handleSubmit(subscribe)}
                 onEnter={() => handleSubmit(subscribe)}
-                placeholder= { t("landing.NewsletterCTA.placeholder") }
+                placeholder={t("landing.NewsletterCTA.placeholder")}
                 end={status === "success"}
               />
               {customMessage && <div className={styles.errorMessage}>{customMessage}</div>}