refactor: add typescript support to project

2022-06-21 15:08:35 +08:00
parent 88ec2b742a
commit bd799ebea8
259 changed files with 1042 additions and 458 deletions
@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import useInviteLink from "../hook/useInviteLink";
+import Input from "./styled/Input";
+import Button from "./styled/Button";
+
+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;
+  }
+`;
+
+export default function InviteLink() {
+  const { generating, link, linkCopied, copyLink, generateNewLink } = useInviteLink();
+  const handleNewLink = () => {
+    generateNewLink();
+  };
+
+  return (
+    <StyledWrapper>
+      <span className="tip">Share this link to invite people to this server.</span>
+      <div className="link">
+        <Input readOnly className={"large"} placeholder="Generating" value={link} />
+        <Button onClick={copyLink} className="ghost small border_less">
+          {linkCopied ? "Copied" : `Copy`}
+        </Button>
+      </div>
+      <span className="sub_tip">Invite link expires in 7 days.</span>
+      <Button className="ghost" disabled={generating} onClick={handleNewLink}>
+        {generating ? `Generating` : `Generate New Link`}
+      </Button>
+    </StyledWrapper>
+  );
+}