From 8dfcef39004ea8037886db81898f417685a3caa9 Mon Sep 17 00:00:00 2001
From: Daniel Hougaard <daniel@infisical.com>
Date: Thu, 22 Aug 2024 08:12:40 +0400
Subject: [PATCH] Seperate component for Org Invite Links

---
 .../OrgMembersSection/OrgInviteLink.tsx       | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx

diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx
new file mode 100644
index 000000000..1c0980e18
--- /dev/null
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgInviteLink.tsx
@@ -0,0 +1,49 @@
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+  invite: { email: string; link: string };
+};
+
+export const OrgInviteLink = ({ invite }: Props) => {
+  const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
+
+  const copyTokenToClipboard = () => {
+    if (isInviteLinkCopied) return;
+
+    navigator.clipboard.writeText(invite.link);
+    setInviteLinkCopied.timedToggle();
+
+    createNotification({
+      type: "info",
+      text: "Copied invitation link to clipboard"
+    });
+  };
+
+  return (
+    <div key={`invite-${invite.email}`}>
+      <p className="text-sm text-mineshaft-400">
+        Invite for <span className="font-medium">{invite.email}</span>
+      </p>
+      <div className="flex flex-col gap-1 rounded-md bg-white/[0.04] p-2 text-base text-gray-400">
+        <p className="line-clamp-1 mr-4 overflow-hidden text-ellipsis whitespace-nowrap	">
+          {invite.link}
+        </p>
+        <Tooltip content={`Copy invitation link for ${invite.email}`}>
+          <IconButton
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="group relative"
+            onClick={() => copyTokenToClipboard()}
+          >
+            <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
+          </IconButton>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};