chore: i18n in toast

src/common/component/ServerVersionChecker.tsx

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useGetServerVersionQuery } from '../../app/services/server';
 import { compareVersion } from '../utils';
 
@@ -9,14 +10,24 @@ type Props = {
 }
 
 const ServerVersionChecker = ({ empty = false, version, children }: Props) => {
+  const { t } = useTranslation();
   const { data: currentVersion, isSuccess } = useGetServerVersionQuery();
   if (!isSuccess) return null;
   const res = compareVersion(currentVersion, version);
   if (res < 0) return empty ? null : <div className='flex flex-col gap-2 items-start border border-solid border-orange-500 p-3 rounded-lg'>
-    <span className='text-gray-400 text-sm'>This function needs server version:<strong className='font-bold'>{version}</strong> at least 🚨</span>
-    <span className='text-gray-400 text-sm'>Your current version:<strong className='font-bold'>{currentVersion}</strong></span>
-    <span className='text-gray-400 text-sm'>Please upgrade the Server!</span>
-    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">How to Update VoceChat Server 📖 </a>
+    <span className='text-gray-400 text-sm'>
+      <Trans i18nKey={"server_update.version_needed"}>
+        <strong className='font-bold'>{{ version }}</strong>
+      </Trans>
+    </span>
+    <span className='text-gray-400 text-sm'>
+      <Trans i18nKey={"server_update.current_version"}>
+        <strong className='font-bold'>{{ version: currentVersion }}</strong>
+      </Trans>
+    </span>
+    <span className='text-gray-400 text-sm'>{t("server_update.update_tip")}</span>
+    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">
+      {t("server_update.howto")}  📖 </a>
   </div>;
   return children;
 };