✨ Add copy button to invite modal

src/modals/copy-invite/copy-invite.modal.tsx

@@ -1,12 +1,14 @@
-import { Button, Mark, Stack, Text } from '@mantine/core';
+import { Button, CopyButton, Mark, Stack, Text } from '@mantine/core';
 import { ContextModalProps, modals } from '@mantine/modals';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 export const CopyInviteModal = ({
-  context,
   id,
   innerProps,
 }: ContextModalProps<{ id: string; token: string; expire: Date }>) => {
+  const inviteUrl = useInviteUrl(innerProps.id, innerProps.token);
+
   return (
     <Stack>
       <Text>
@@ -29,15 +31,26 @@ export const CopyInviteModal = ({
         </Mark>
       </Stack>
 
+      <CopyButton value={inviteUrl}>
+        {({ copy }) => (
           <Button
             onClick={() => {
+              copy();
               modals.close(id);
             }}
             variant="default"
             fullWidth
           >
-        Cancel
+            Copy & Dismiss
           </Button>
+        )}
+      </CopyButton>
     </Stack>
   );
 };
+
+const useInviteUrl = (id: string, token: string) => {
+  const router = useRouter();
+
+  return `${window.location.href.replace(router.pathname, `/auth/invite/${id}?token=${token}`)}`;
+};

src/pages/manage/users/invites.tsx

@@ -13,6 +13,7 @@ import { modals } from '@mantine/modals';
 import { IconPlus, IconTrash } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { api } from '~/utils/api';
@@ -22,6 +23,7 @@ const ManageUserInvitesPage = () => {
   const { data } = api.invites.all.useQuery({
     page: activePage,
   });
+  const router = useRouter();
 
   const { classes } = useStyles();