feat: implement click event for share dropdown menu

liam-hq · Oct 11, 2024 · edbff43 · edbff43
1 parent 339d82b
commit edbff43
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/...service-site/src/features/posts/components/ShareDropdownMenu/ShareDropdownMenu.module.css b/...service-site/src/features/posts/components/ShareDropdownMenu/ShareDropdownMenu.module.css
@@ -3,3 +3,8 @@
   height: 10px;
   color: var(--overlay-70);
 }
+
+.link {
+  width: 100%;
+  height: 100%;
+}
diff --git a/...d/apps/service-site/src/features/posts/components/ShareDropdownMenu/ShareDropdownMenu.tsx b/...d/apps/service-site/src/features/posts/components/ShareDropdownMenu/ShareDropdownMenu.tsx
@@ -17,9 +17,15 @@ type Props = PropsWithChildren<{
   lang: Lang
 }>
 
+const handleSelect = (url: string) => () => {
+  window.open(url, '_blank', 'noreferrer')
+}
+
 export const ShareDropdownMenu: FC<Props> = ({ children, lang }) => {
   const [open, setOpen] = useState(false)
   const { t } = getTranslation(lang)
+  const url = encodeURIComponent(window.location.href)
+  const title = document.title
 
   return (
     <DropdownMenuRoot open={open} onOpenChange={setOpen}>
@@ -30,19 +36,25 @@ export const ShareDropdownMenu: FC<Props> = ({ children, lang }) => {
           <CopyLinkItem t={t} onOpenChange={setOpen} />
           <DropdownMenuItem
             leftIcon={<XIcon className={styles.icon} />}
-            onSelect={() => alert('Item 2 clicked')}
+            onSelect={handleSelect(
+              `http://twitter.com/share?url=${url}&text=${title}`,
+            )}
           >
             <span>{t('posts.share.x')}</span>
           </DropdownMenuItem>
           <DropdownMenuItem
             leftIcon={<FacebookIcon className={styles.icon} />}
-            onSelect={() => alert('Item 3 clicked')}
+            onSelect={handleSelect(
+              `http://www.facebook.com/share.php?u=${url}`,
+            )}
           >
             <span>{t('posts.share.facebook')}</span>
           </DropdownMenuItem>
           <DropdownMenuItem
             leftIcon={<LinkedInIcon className={styles.icon} />}
-            onSelect={() => alert('Item 3 clicked')}
+            onSelect={handleSelect(
+              `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+            )}
           >
             <span>{t('posts.share.linkedin')}</span>
           </DropdownMenuItem>

diff --git a/frontend/packages/ui/src/components/DropdownMenu/DropdownMenu.tsx b/frontend/packages/ui/src/components/DropdownMenu/DropdownMenu.tsx
@@ -76,7 +76,7 @@ export const DropdownMenuItem = forwardRef<
         {leftIcon && (
           <span className={clsx(styles.icon, styles.leftIcon)}>{leftIcon}</span>
         )}
-        <div>{children}</div>
+        {children}
       </Item>
     )
   },