mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 00:03:33 +10:00
feat: add dropdown to tweet or copy signing link
This commit is contained in:
committed by
Mythie
parent
016ae6ec6f
commit
127dc42dc5
@ -2,10 +2,16 @@
|
|||||||
|
|
||||||
import { HTMLAttributes } from 'react';
|
import { HTMLAttributes } from 'react';
|
||||||
|
|
||||||
import { Share } from 'lucide-react';
|
import { Copy, Share, Twitter } from 'lucide-react';
|
||||||
|
|
||||||
import { trpc } from '@documenso/trpc/react';
|
import { trpc } from '@documenso/trpc/react';
|
||||||
import { Button } from '@documenso/ui/primitives/button';
|
import { Button } from '@documenso/ui/primitives/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@documenso/ui/primitives/dropdown-menu';
|
||||||
import { useToast } from '@documenso/ui/primitives/use-toast';
|
import { useToast } from '@documenso/ui/primitives/use-toast';
|
||||||
|
|
||||||
import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
|
import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard';
|
||||||
@ -15,6 +21,12 @@ export type ShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
|
|||||||
documentId: number;
|
documentId: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const generateTwitterIntent = (text: string, shareUrl: string) => {
|
||||||
|
return `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}%0A${encodeURIComponent(
|
||||||
|
shareUrl,
|
||||||
|
)}`;
|
||||||
|
};
|
||||||
|
|
||||||
export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
|
export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
const [, copyToClipboard] = useCopyToClipboard();
|
const [, copyToClipboard] = useCopyToClipboard();
|
||||||
@ -22,7 +34,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
|
|||||||
const { mutateAsync: createOrGetShareLink, isLoading } =
|
const { mutateAsync: createOrGetShareLink, isLoading } =
|
||||||
trpc.shareLink.createOrGetShareLink.useMutation();
|
trpc.shareLink.createOrGetShareLink.useMutation();
|
||||||
|
|
||||||
const onShareClick = async () => {
|
const onCopyClick = async () => {
|
||||||
const { slug } = await createOrGetShareLink({
|
const { slug } = await createOrGetShareLink({
|
||||||
token: token,
|
token: token,
|
||||||
documentId,
|
documentId,
|
||||||
@ -36,16 +48,48 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onTweetClick = async () => {
|
||||||
|
const { slug } = await createOrGetShareLink({
|
||||||
|
token: token,
|
||||||
|
documentId,
|
||||||
|
});
|
||||||
|
|
||||||
|
window.open(
|
||||||
|
generateTwitterIntent(
|
||||||
|
'I just signed a document with @documenso. Check it out!',
|
||||||
|
`${window.location.origin}/share/${slug}`,
|
||||||
|
),
|
||||||
|
'_blank',
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="flex-1"
|
|
||||||
disabled={!token || !documentId}
|
disabled={!token || !documentId}
|
||||||
|
className="flex-1"
|
||||||
loading={isLoading}
|
loading={isLoading}
|
||||||
onClick={onShareClick}
|
|
||||||
>
|
>
|
||||||
{!isLoading && <Share className="mr-2 h-5 w-5" />}
|
{!isLoading && <Share className="mr-2 h-5 w-5" />}
|
||||||
Share
|
Share
|
||||||
</Button>
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent>
|
||||||
|
<DropdownMenuItem className="px-10 py-3" asChild>
|
||||||
|
<div className="border-0" onClick={onCopyClick}>
|
||||||
|
<Copy className="mr-2 h-5 w-5" />
|
||||||
|
Copy Link
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem className="px-10 py-3" asChild>
|
||||||
|
<div onClick={onTweetClick}>
|
||||||
|
<Twitter className="mr-2 h-5 w-5" />
|
||||||
|
Tweet
|
||||||
|
</div>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
11
package-lock.json
generated
11
package-lock.json
generated
@ -20029,6 +20029,7 @@
|
|||||||
"@aws-sdk/signature-v4-crt": "^3.410.0",
|
"@aws-sdk/signature-v4-crt": "^3.410.0",
|
||||||
"@documenso/email": "*",
|
"@documenso/email": "*",
|
||||||
"@documenso/prisma": "*",
|
"@documenso/prisma": "*",
|
||||||
|
"@documenso/signing": "*",
|
||||||
"@next-auth/prisma-adapter": "1.0.7",
|
"@next-auth/prisma-adapter": "1.0.7",
|
||||||
"@pdf-lib/fontkit": "^1.1.1",
|
"@pdf-lib/fontkit": "^1.1.1",
|
||||||
"@scure/base": "^1.1.3",
|
"@scure/base": "^1.1.3",
|
||||||
@ -20082,17 +20083,23 @@
|
|||||||
"packages/signing": {
|
"packages/signing": {
|
||||||
"name": "@documenso/signing",
|
"name": "@documenso/signing",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"license": "MIT",
|
"license": "AGPLv3",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@documenso/tsconfig": "*",
|
"@documenso/tsconfig": "*",
|
||||||
"node-forge": "^1.3.1",
|
"node-forge": "^1.3.1",
|
||||||
"node-signpdf": "^2.0.0",
|
"node-signpdf": "^2.0.0",
|
||||||
"pdf-lib": "^1.17.1"
|
"pdf-lib": "^1.17.1",
|
||||||
|
"ts-pattern": "^5.0.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node-forge": "^1.3.4"
|
"@types/node-forge": "^1.3.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"packages/signing/node_modules/ts-pattern": {
|
||||||
|
"version": "5.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.5.tgz",
|
||||||
|
"integrity": "sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA=="
|
||||||
|
},
|
||||||
"packages/tailwind-config": {
|
"packages/tailwind-config": {
|
||||||
"name": "@documenso/tailwind-config",
|
"name": "@documenso/tailwind-config",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
|
|||||||
Reference in New Issue
Block a user