Update ShareModal component with additional social media sharing options

Sitecore · Feb 20, 2024 · d9cf43e · d9cf43e
1 parent d5c7bbc
commit d9cf43e
Showing 1 changed file with 39 additions and 24 deletions.
diff --git a/src/components/ui/ShareModal/ShareModal.tsx b/src/components/ui/ShareModal/ShareModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useRouter } from 'next/router'
 import { Button, HStack, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, useDisclosure, useClipboard } from '@chakra-ui/react';
-import { XIcon, TwitterShareButton, LinkedinIcon, LinkedinShareButton, EmailShareButton, EmailIcon } from "react-share";
+import { XIcon, TwitterShareButton, LinkedinIcon, LinkedinShareButton, EmailShareButton, EmailIcon, WhatsappShareButton, TelegramShareButton, RedditShareButton, WhatsappIcon, TelegramIcon, RedditIcon } from "react-share";
 import { MdContentCopy } from "react-icons/md";
 
 const shareText = "I just completed the Sitecore Migration Advisor assessment and got my migration resources. Check it out!"
@@ -28,6 +28,21 @@ export default function ShareModal() {
           <ModalCloseButton />
           <ModalBody mb={2}>
             <HStack mb={2} justifyContent={'center'}>
+              <WhatsappShareButton
+                url={shareUrl}
+                title={shareText}>
+                <WhatsappIcon size={32} round={true} />
+              </WhatsappShareButton>
+              <TelegramShareButton
+                url={shareUrl}
+                title={shareText}>
+                <TelegramIcon size={32} round={true} />
+              </TelegramShareButton>
+              <RedditShareButton
+                url={shareUrl}
+                title={shareText}>
+                <RedditIcon size={32} round={true} />
+              </RedditShareButton>
               <EmailShareButton
                 url={shareUrl}
                 title={shareText}>
@@ -36,28 +51,28 @@ export default function ShareModal() {
               <LinkedinShareButton
                 url={shareUrl}
                 title={shareText}>
-                <LinkedinIcon size={32} round={true} />
-              </LinkedinShareButton>
-              <TwitterShareButton
-                url={shareUrl}
-                title={shareText}>
-                <XIcon size={32} round={true} />
-              </TwitterShareButton>
-            </HStack>
-            <HStack>
-              <Input
-                value={shareUrl}
-                contentEditable={false}
-                onChange={(e) => {
-                  setValue(e.target.value);
-                }}
-                mr={2}
-              />
-              <Button whiteSpace={'nowrap'} onClick={onCopy}><MdContentCopy /></Button>
-            </HStack>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </div>
+              <LinkedinIcon size={32} round={true} />
+            </LinkedinShareButton>
+            <TwitterShareButton
+              url={shareUrl}
+              title={shareText}>
+              <XIcon size={32} round={true} />
+            </TwitterShareButton>
+          </HStack>
+          <HStack>
+            <Input
+              value={shareUrl}
+              contentEditable={false}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              mr={2}
+            />
+            <Button whiteSpace={'nowrap'} onClick={onCopy}><MdContentCopy /></Button>
+          </HStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+    </div >
   )
 }