first commit

resources/client/sharing/share-menu-trigger.tsx

@@ -0,0 +1,65 @@
+import {Menu, MenuTrigger} from '@common/ui/navigation/menu/menu-trigger';
+import {Item} from '@common/ui/forms/listbox/item';
+import {Trans} from '@common/i18n/trans';
+import {FacebookIcon} from '@common/icons/social/facebook';
+import {TwitterIcon} from '@common/icons/social/twitter';
+import useClipboard from 'react-use-clipboard';
+import {toast} from '@common/ui/toast/toast';
+import {message} from '@common/i18n/message';
+import {shareLinkSocially} from '@common/utils/urls/share-link-socially';
+import {useTrans} from '@common/i18n/use-trans';
+import {ReactElement} from 'react';
+import {CopyLinkIcon} from '@app/sharing/copy-link-icon';
+
+interface Props {
+  link: string;
+  children: ReactElement;
+}
+export function ShareMenuTrigger({link, children}: Props) {
+  const {trans} = useTrans();
+  const [, setUrlCopied] = useClipboard(link);
+
+  return (
+    <MenuTrigger>
+      {children}
+      <Menu>
+        <Item
+          value="clipboard"
+          startIcon={<CopyLinkIcon />}
+          onSelected={() => {
+            setUrlCopied();
+            toast.positive(message('Copied link to clipboard'));
+          }}
+        >
+          <Trans message="Copy to clipboard" />
+        </Item>
+        <Item
+          value="facebook"
+          startIcon={<FacebookIcon />}
+          onClick={() => {
+            shareLinkSocially(
+              'facebook',
+              link,
+              trans(message('Check out this link')),
+            );
+          }}
+        >
+          <Trans message="Share to facebook" />
+        </Item>
+        <Item
+          value="twitter"
+          startIcon={<TwitterIcon />}
+          onClick={() => {
+            shareLinkSocially(
+              'twitter',
+              link,
+              trans(message('Check out this link')),
+            );
+          }}
+        >
+          <Trans message="Share to twitter" />
+        </Item>
+      </Menu>
+    </MenuTrigger>
+  );
+}