feat: qr code image for invite link

src/common/component/InviteLink.tsx

@@ -1,44 +1,10 @@
-import styled from "styled-components";
+import { FC } from "react";
 import useInviteLink from "../hook/useInviteLink";
 import Input from "./styled/Input";
 import Button from "./styled/Button";
-import { FC } from "react";
 import { useTranslation } from "react-i18next";
+import QRCode from "./QRCode";
 
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding-bottom: 32px;
-  .tip {
-    font-weight: 500;
-    font-size: 14px;
-    color: #6b7280;
-    margin-bottom: 8px;
-  }
-  .link {
-    width: 512px;
-    margin-bottom: 12px;
-    position: relative;
-    button {
-      position: absolute;
-      right: 4px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-    input {
-      padding-right: 75px;
-    }
-  }
-  .sub_tip {
-    margin-left: 4px;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    color: #616161;
-    margin-bottom: 20px;
-  }
-`;
 type Props = {};
 const InviteLink: FC<Props> = () => {
   const { t } = useTranslation("chat");
@@ -48,19 +14,22 @@ const InviteLink: FC<Props> = () => {
   };
 
   return (
-    <StyledWrapper>
+    <div className="flex flex-col items-start pb-8">
-      <span className="tip">{t("share_invite_link")}</span>
+      <span className="font-semibold text-sm mb-2 text-gray-500">{t("share_invite_link")}</span>
-      <div className="link">
+      <div className="w-[512px] mb-3 relative">
-        <Input readOnly className={"large"} placeholder="Generating" value={link} />
+        <Input readOnly className={"large !pr-16"} placeholder="Generating" value={link} />
-        <Button onClick={copyLink} className="ghost small border_less">
+        <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="sub_tip">{t("invite_link_expire")}</span>
+      <span className="text-xs text-gray-600">{t("invite_link_expire")}</span>
+      <div className="w-44 h-44 my-2">
+        <QRCode link={link} />
+      </div>
       <Button className="ghost" disabled={generating} onClick={handleNewLink}>
         {generating ? `Generating` : t("generate_new_link")}
       </Button>
-    </StyledWrapper>
+    </div>
   );
 };
 

src/common/component/InviteModal/InviteByEmail.tsx

@@ -4,11 +4,13 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { useSendLoginMagicLinkMutation } from "../../../app/services/auth";
 import useInviteLink from "../../hook/useInviteLink";
+import QRCode from "../QRCode";
 import Button from "../styled/Button";
 import Input from "../styled/Input";
 
 const Styled = styled.div`
   padding: 16px 0;
+  padding-bottom: 0;
   .input {
     position: relative;
     display: flex;
@@ -74,6 +76,7 @@ interface Props {
 }
 
 const InviteByEmail: FC<Props> = ({ cid }) => {
+
   const { t } = useTranslation("chat");
   const { t: ct } = useTranslation();
   const [email, setEmail] = useState("");
@@ -137,6 +140,9 @@ const InviteByEmail: FC<Props> = ({ cid }) => {
           </button>
         </div>
       </div>
+      <div className="w-44 h-44 my-2">
+        {!generating && <QRCode link={link} />}
+      </div>
       <div className="tip">
         {t("invite_link_expire")}
         <button disabled={generating} className="new" onClick={() => generateNewLink()}>

src/common/component/QRCode.tsx

@@ -0,0 +1,31 @@
+// import React from 'react';
+import { QRCodeCanvas } from 'qrcode.react';
+import { useAppSelector } from '../../app/store';
+
+type Props = {
+    link: string
+}
+
+const QRCode = ({ link }: Props) => {
+    const logo = useAppSelector(store => store.server.logo);
+    return (
+        <QRCodeCanvas value={link}
+            className="rounded border border-solid border-gray-200 p-1 !w-full !h-full"
+            size={512}
+            bgColor={"#fff"}
+            fgColor={"#22ccee"}
+            level={"L"}
+            includeMargin={false}
+            imageSettings={{
+                src: logo,
+                x: undefined,
+                y: undefined,
+                height: 28,
+                width: 28,
+
+                excavate: true,
+            }} />
+    );
+};
+
+export default QRCode;