refactor: project configuration

2023-05-15 16:46:50 +08:00
parent 187ffd24d1
commit 20b907aae4
293 changed files with 991 additions and 964 deletions
@@ -0,0 +1,42 @@
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import useInviteLink from "@/hooks/useInviteLink";
+import Input from "./styled/Input";
+import Button from "./styled/Button";
+import QRCode from "./QRCode";
+import IconQuestion from '@/assets/icons/question.svg';
+
+type Props = {};
+const InviteLink: FC<Props> = () => {
+  const { t } = useTranslation("chat");
+  const { generating, link, linkCopied, copyLink, generateNewLink } = useInviteLink();
+  const handleNewLink = () => {
+    generateNewLink();
+  };
+
+  return (
+    <div className="flex flex-col items-start pb-8">
+      <p className="font-semibold text-sm mb-2 text-gray-500 dark:text-gray-50 flex flex-col md:flex-row gap-4">
+        {t("share_invite_link")}
+        <a className="text-primary-500 flex gap-1 items-center" href="http://doc.voce.chat/faq#fe_url" target="_blank" rel="noopener noreferrer">
+          <IconQuestion /> {t("invite_link_faq")}
+        </a>
+      </p>
+      <div className="w-full md:w-[512px] mb-3 relative">
+        <Input readOnly className={"large !pr-16"} placeholder="Generating" value={link} />
+        <Button onClick={copyLink} className="ghost small border_less absolute right-1 top-1/2 -translate-y-1/2">
+          {linkCopied ? "Copied" : t("action.copy", { ns: "common" })}
+        </Button>
+      </div>
+      <span className="text-xs text-gray-600 dark:text-gray-100">{t("invite_link_expire")}</span>
+      <div className="w-44 h-44 my-2">
+        <QRCode size={1200} link={link} />
+      </div>
+      <Button className="ghost" disabled={generating} onClick={handleNewLink}>
+        {generating ? `Generating` : t("generate_new_link")}
+      </Button>
+    </div>
+  );
+};
+
+export default InviteLink;