diff --git a/web/package.json b/web/package.json
index 652417f4..31c7c2f3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -27,6 +27,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-easy-crop": "^3.5.2",
+ "react-helmet": "^6.1.0",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
@@ -48,6 +49,7 @@
"@types/node": "^15.12.5",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
+ "@types/react-helmet": "^6.1.2",
"@types/react-router": "^5.1.15",
"@types/react-router-dom": "^5.1.7",
"@types/react-transition-group": "^4.4.2",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index ff0e5efe..8a1f7038 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,10 +1,11 @@
import React, { useCallback } from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
-import { TcProvider, useColorScheme } from 'tailchat-shared';
+import { TcProvider, useColorScheme, useLanguage } from 'tailchat-shared';
import clsx from 'clsx';
import { Loadable } from './components/Loadable';
import { ConfigProvider as AntdProvider } from 'antd';
import { parseColorScheme } from './utils/color-scheme-helper';
+import { Helmet } from 'react-helmet';
const MainRoute = Loadable(() =>
import('./routes/Main').then((module) => module.MainRoute)
@@ -64,9 +65,21 @@ export const AppContainer: React.FC = React.memo((props) => {
});
AppContainer.displayName = 'AppContainer';
+const AppHeader: React.FC = React.memo(() => {
+ const { language } = useLanguage();
+
+ return (
+
+
+
+ );
+});
+AppHeader.displayName = 'AppHeader';
+
export const App: React.FC = React.memo(() => {
return (
+
diff --git a/yarn.lock b/yarn.lock
index d31660e0..f1a6d356 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2041,6 +2041,13 @@
dependencies:
"@types/react" "*"
+"@types/react-helmet@^6.1.2":
+ version "6.1.2"
+ resolved "https://registry.nlark.com/@types/react-helmet/download/@types/react-helmet-6.1.2.tgz#e9d7d16b29e4ec5716711c52c35c3cec45819eac"
+ integrity sha1-6dfRaynk7FcWcRxSw1w87EWBnqw=
+ dependencies:
+ "@types/react" "*"
+
"@types/react-redux@^7.1.16":
version "7.1.16"
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
@@ -9515,6 +9522,21 @@ react-fast-compare@^2.0.1:
resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+react-fast-compare@^3.1.1:
+ version "3.2.0"
+ resolved "https://registry.npm.taobao.org/react-fast-compare/download/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+ integrity sha1-ZBqdqBtqYyDycOiXJPtFoLOeQ7s=
+
+react-helmet@^6.1.0:
+ version "6.1.0"
+ resolved "https://registry.nlark.com/react-helmet/download/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+ integrity sha1-p1DVFlyxPPIT5EdHUCZS55RGhyY=
+ dependencies:
+ object-assign "^4.1.1"
+ prop-types "^15.7.2"
+ react-fast-compare "^3.1.1"
+ react-side-effect "^2.1.0"
+
react-i18next@^11.11.0:
version "11.11.0"
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.0.tgz#2f7c6cb4f81f94d1728a02d60e4bb5216709f942"
@@ -9591,6 +9613,11 @@ react-router@5.2.0, react-router@^5.2.0:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
+react-side-effect@^2.1.0:
+ version "2.1.1"
+ resolved "https://registry.npm.taobao.org/react-side-effect/download/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+ integrity sha1-ZsVwHD51YKtIIqTuJ0Le4hXXLrM=
+
react-transition-group@^4.4.2:
version "4.4.2"
resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"