feat: license setting

src/routes/setting/License.tsx

@@ -0,0 +1,96 @@
+import { ChangeEvent, useState } from "react";
+import styled from "styled-components";
+import Tippy from "@tippyjs/react";
+import toast from "react-hot-toast";
+import { hideAll } from "tippy.js";
+import Textarea from "../../common/component/styled/Textarea";
+import Button from "../../common/component/styled/Button";
+import useLicense from "../../common/hook/useLicense";
+
+const StyledConfirm = styled.div`
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid orange;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 250px;
+  .tip {
+    color: orange;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  .btns {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    gap: 14px;
+  }
+`;
+const Styled = styled.div`
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 15px;
+  > .input {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+`;
+
+export default function License() {
+  const { checking, upserting, upsertLicense } = useLicense();
+  const [license, setLicense] = useState("");
+  const handleUpsert = async () => {
+    if (!license) {
+      toast.error("License Empty");
+      hideAll();
+      return;
+    }
+    const success = await upsertLicense(license);
+    if (!success) {
+      toast.error("Invalid License");
+      hideAll();
+    } else {
+      toast.success("License Updated!");
+    }
+  };
+  const handleLicenseInput = (evt: ChangeEvent<HTMLTextAreaElement>) => {
+    setLicense(evt.target.value);
+  };
+
+  const disableBtn = checking || upserting || !license;
+  return (
+    <Styled>
+      <div className="input">
+        <Textarea rows={10} id="license" value={license} onChange={handleLicenseInput} />
+      </div>
+      <Tippy
+        interactive
+        placement="bottom-start"
+        trigger="click"
+        content={
+          <StyledConfirm>
+            <div className="tip">Are you sure to update License?</div>
+            <div className="btns">
+              <Button onClick={() => hideAll()} className="cancel small">
+                Cancel
+              </Button>
+              <Button disabled={disableBtn} className="small danger" onClick={handleUpsert}>
+                Yes
+              </Button>
+            </div>
+          </StyledConfirm>
+        }
+      >
+        <Button disabled={disableBtn}>Save License</Button>
+      </Tippy>
+    </Styled>
+  );
+}

src/routes/setting/navs.tsx

@@ -4,6 +4,7 @@ import Logins from "./config/Logins";
 import ConfigFirebase from "./config/Firebase";
 import ConfigSMTP from "./config/SMTP";
 import APIConfig from "./APIConfig";
+import License from "./License";
 import ManageMembers from "../../common/component/ManageMembers";
 import FAQ from "../../common/component/FAQ";
 import ConfigAgora from "./config/Agora";
@@ -63,6 +64,11 @@ const navs = [
         name: "api",
         title: "Third-party APP",
         component: <APIConfig />
+      },
+      {
+        name: "license",
+        title: "License",
+        component: <License />
       }
     ],
     admin: true