Add copy and share links to group confirmation step

app/soapbox/features/ui/components/modals/manage-group-modal/steps/confirmation-step.tsx

@@ -1,13 +1,28 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Avatar, Divider, HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Divider, HStack, Stack, Text, Button } from 'soapbox/components/ui';
 
 interface IConfirmationStep {
   group: any
 }
 
 const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
+  const handleCopyLink = () => {
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(group.uri);
+    }
+  };
+
+  const handleShare = () => {
+    navigator.share({
+      text: group.display_name,
+      url: group.uri,
+    }).catch((e) => {
+      if (e.name !== 'AbortError') console.error(e);
+    });
+  };
+
   return (
     <Stack space={9}>
       <Stack space={3}>
@@ -59,6 +74,18 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
           </InfoListItem>
         </Stack>
       </Stack>
+
+      <HStack space={2} justifyContent='center'>
+        {('share' in navigator) && (
+          <Button onClick={handleShare} theme='transparent' icon={require('@tabler/icons/share.svg')} className='text-primary-600'>
+            <FormattedMessage id='manage_group.confirmation.share' defaultMessage='Share this group' />
+          </Button>
+        )}
+
+        <Button onClick={handleCopyLink} theme='transparent' icon={require('@tabler/icons/link.svg')} className='text-primary-600'>
+          <FormattedMessage id='manage_group.confirmation.copy' defaultMessage='Copy link' />
+        </Button>
+      </HStack>
     </Stack>
   );
 };