chore: updates

src/components/ConfigTip.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+
+type TipProps = { title: ReactNode; desc: ReactNode };
+export const ConfigTip = ({ title, desc }: TipProps) => {
+  return (
+    <div className="flex flex-col text-sm">
+      <h2 className="font-semibold dark:text-white">{title}</h2>
+      <p className="text-gray-400 text-xs">{desc}</p>
+    </div>
+  );
+};

src/routes/setting/BotConfig/index.tsx

@@ -14,16 +14,8 @@ import NameEdit from "./NameEdit";
 import WebhookEdit from "./WebhookEdit";
 import WebhookModal from "./WebhookModal";
 import { shallowEqual } from "react-redux";
+import { ConfigTip } from "@/components/ConfigTip";
 
-type TipProps = { title: string; desc: string };
-const Tip = ({ title, desc }: TipProps) => {
-  return (
-    <div className="flex flex-col text-sm">
-      <h2 className="font-semibold dark:text-white">{title}</h2>
-      <p className="text-gray-400 text-xs">{desc}</p>
-    </div>
-  );
-};
 const tdClass =
   "p-6 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100 align-top";
 type WebhookParams = { webhook?: string; uid: number };
@@ -65,8 +57,8 @@ export default function BotConfig() {
     <>
       <div className="flex flex-col justify-start items-start gap-4">
         <div className="flex flex-col gap-4 max-w-[634px] mb-4">
-          <Tip title={t("bot_tip_title")} desc={t("bot_tip_desc")} />
-          <Tip title={t("webhook_tip_title")} desc={t("webhook_tip_desc")} />
+          <ConfigTip title={t("bot_tip_title")} desc={t("bot_tip_desc")} />
+          <ConfigTip title={t("webhook_tip_title")} desc={t("webhook_tip_desc")} />
         </div>
         <div className="flex flex-col gap-1">
           <h2 className="font-semibold flex gap-4 items-center dark:text-white">

src/routes/setting/config/Agora.tsx

@@ -8,6 +8,7 @@ import Label from "@/components/styled/Label";
 import Toggle from "@/components/styled/Toggle";
 import useConfig from "@/hooks/useConfig";
 import HowToTip from "./HowToTip";
+import { ConfigTip } from "@/components/ConfigTip";
 
 export default function ConfigAgora() {
   const { t } = useTranslation("setting", { keyPrefix: "agora" });
@@ -42,6 +43,7 @@ export default function ConfigAgora() {
   const _url = url || "https://api.agora.io";
   return (
     <div className="setting-container">
+      <ConfigTip title={t("desc")} desc={t("sub_desc")} />
       <div className="inputs">
         <div className="input row">
           <Label className="flex items-center gap-2">

src/routes/setting/config/Firebase.tsx

@@ -8,6 +8,7 @@ import Label from "@/components/styled/Label";
 import StyledRadio from "@/components/styled/Radio";
 import Textarea from "@/components/styled/Textarea";
 import useConfig from "@/hooks/useConfig";
+import { ConfigTip } from "@/components/ConfigTip";
 
 interface IOptions {
   disable: string;
@@ -72,6 +73,7 @@ export default function ConfigFirebase() {
   const { token_url, project_id, private_key, client_email } = values as FirebaseConfig;
   return (
     <div className="setting-container max-md:w-full max-md:h-auto">
+      <ConfigTip title={t("firebase.desc")} desc={t("firebase.sub_desc")} />
       <StyledRadio
         options={Object.values(Options)}
         values={Object.keys(Options)}

src/routes/setting/config/SMTP.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import { useSendTestEmailMutation } from "@/app/services/server";
 import { SMTPConfig } from "@/types/server";
@@ -11,6 +11,8 @@ import Label from "@/components/styled/Label";
 import Toggle from "@/components/styled/Toggle";
 import useConfig from "@/hooks/useConfig";
 import HowToTip from "./HowToTip";
+import { ConfigTip } from "@/components/ConfigTip";
+import { Link } from "./Tooltip";
 
 export default function ConfigSMTP() {
   const { t } = useTranslation("setting", { keyPrefix: "smtp" });
@@ -55,6 +57,14 @@ export default function ConfigSMTP() {
   const { host, port, from, username, password, enabled = false } = values as SMTPConfig;
   return (
     <div className="setting-container max-md:w-full">
+      <ConfigTip
+        title={
+          <Trans ns="setting" i18nKey={"smtp.desc"}>
+            <Link newTab={false} to={"/#/setting/license"} />
+          </Trans>
+        }
+        desc={t("sub_desc")}
+      />
       <div className="inputs">
         <div className="input row">
           <Label className="flex items-center gap-2">

src/routes/setting/config/Tooltip.tsx

@@ -7,9 +7,13 @@ import { Trans } from "react-i18next";
 
 import IconQuestion from "@/assets/icons/question.svg";
 
-const Link = ({ to, children }: PropsWithChildren<{ to: string }>) => {
+export const Link = ({
+  to,
+  newTab = true,
+  children
+}: PropsWithChildren<{ to: string; newTab?: boolean }>) => {
   return (
-    <a href={to} className="text-primary-500" target="_blank" rel="noreferrer">
+    <a href={to} className="text-primary-500" target={newTab ? "_blank" : "_self"} rel="noreferrer">
       {children}
     </a>
   );