feat: display current backend host in title

for https://github.com/haishanh/yacd/issues/531

1 files changed, 24 insertions, 0 deletions

diff --git a/src/components/shared/Head.tsx b/src/components/shared/Head.tsx
new file mode 100644
index 0000000..5997a3a
--- /dev/null
+++ b/src/components/shared/Head.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+import { connect } from 'src/components/StateProvider';
+import { getClashAPIConfig } from 'src/store/app';
+
+const mapState = (s) => ({
+  apiConfig: getClashAPIConfig(s),
+});
+
+function HeadImpl({ apiConfig }: { apiConfig: { baseURL: string } }) {
+  let title = 'yacd';
+  try {
+    title = new URL(apiConfig.baseURL).host;
+  } catch (e) {
+    // ignore
+  }
+  return (
+    <Helmet>
+      <title>{title}</title>
+    </Helmet>
+  );
+}
+
+export const Head = connect(mapState)(HeadImpl);