save

Author: zzq0826

src/components/Footer/Footer.astro

@@ -4,7 +4,6 @@ import PureFooter from "./PureFooter/PureFooter.tsx"
 import i18next from "i18next"
 ---
 
-<!-- // test  -->
 <div>
   <Subscribe client:idle lang={i18next.language} />
   <PureFooter />

src/components/Footer/Subscribe/Subscribe.tsx

@@ -19,9 +19,16 @@ export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
+  const [key, setKey] = useState(0)
 
   i18next.changeLanguage(props.lang)
 
+  useEffect(() => {
+    setTimeout(() => {
+      setKey(key + 1)
+    }, 10000)
+  }, [props.lang])
+
   useEffect(() => {
     setCustomMessage("")
     setEmailValid(isValidEmail(email))
@@ -43,7 +50,7 @@ export default function Subscribe(props) {
   }
 
   return (
-    <div className={clsx(styles.container, "dark:bg-dark-highlight")}>
+    <div key={key} className={clsx(styles.container, "dark:bg-dark-highlight")}>
       <div className={styles.subscribeBox}>
         <span className="text-white dark:text-black bg-black dark:bg-white rounded-[50%]">
           <SubscribeSvg></SubscribeSvg>