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 ( +
+

+ Invite for {invite.email} +

+
+

+ {invite.link} +

+ + copyTokenToClipboard()} + > + + + +
+
+ ); +};