first commit

resources/client/sharing/copy-link-icon.tsx

@@ -0,0 +1,5 @@
+import {createSvgIcon} from '@common/icons/create-svg-icon';
+
+export const CopyLinkIcon = createSvgIcon(
+  <path d="M 4 2 C 2.895 2 2 2.895 2 4 L 2 18 L 4 18 L 4 4 L 18 4 L 18 2 L 4 2 z M 8 6 C 6.895 6 6 6.895 6 8 L 6 20 C 6 21.105 6.895 22 8 22 L 20 22 C 21.105 22 22 21.105 22 20 L 22 8 C 22 6.895 21.105 6 20 6 L 8 6 z M 8 8 L 20 8 L 20 20 L 8 20 L 8 8 z M 16 9.0058594 C 15.230215 9.0058594 14.460443 9.2973698 13.878906 9.8789062 L 12.607422 11.150391 L 14.021484 12.564453 L 12.556641 14.029297 L 11.142578 12.615234 L 9.8789062 13.878906 C 8.7158332 15.041979 8.7158332 16.958021 9.8789062 18.121094 C 10.460397 18.702585 11.234094 19 12 19 C 12.765906 19 13.539603 18.702585 14.121094 18.121094 L 15.384766 16.857422 L 13.970703 15.443359 L 15.457031 13.957031 L 14.042969 12.542969 L 15.292969 11.292969 C 15.691896 10.894042 16.308104 10.894042 16.707031 11.292969 C 17.105958 11.691896 17.105958 12.308104 16.707031 12.707031 L 15.464844 13.949219 L 16.878906 15.363281 L 18.121094 14.121094 C 19.284167 12.958021 19.284167 11.041979 18.121094 9.8789062 C 17.539557 9.2973698 16.769785 9.0058594 16 9.0058594 z M 12.542969 14.042969 L 13.957031 15.457031 L 12.707031 16.707031 C 12.506522 16.90754 12.258094 17 12 17 C 11.741906 17 11.493478 16.90754 11.292969 16.707031 C 10.894042 16.308104 10.894042 15.691896 11.292969 15.292969 L 12.542969 14.042969 z"></path>
+);

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>
+  );
+}