gitscope
/
← marzneshin / dashboard/src/components/copy-button/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/copy-button/index.tsx · v0.3.0-alpha5
Source
1 912d3dc Mrdn 2y ago import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@marzneshin/components';
2 857e289 Mrdn 2y ago import CopyToClipboard from 'react-copy-to-clipboard';
3 857e289 Mrdn 2y ago import { useEffect, useState } from 'react';
4 857e289 Mrdn 2y ago import { useTranslation } from 'react-i18next';
5 857e289 Mrdn 2y ago import { CopyCheck, CopyX, ClipboardCopy, LucideIcon } from 'lucide-react';
6 857e289 Mrdn 2y ago import { toast } from 'sonner';
7 857e289 Mrdn 2y ago import { cn } from '@marzneshin/utils';
8 857e289 Mrdn 2y ago
9 857e289 Mrdn 2y ago interface CopyToClipboardButtonProps {
10 857e289 Mrdn 2y ago text: string;
11 857e289 Mrdn 2y ago disabled?: boolean;
12 857e289 Mrdn 2y ago successMessage: string;
13 857e289 Mrdn 2y ago copyIcon?: LucideIcon;
14 912d3dc Mrdn 2y ago copyLabel?: string;
15 912d3dc Mrdn 2y ago errorLabel?: string;
16 857e289 Mrdn 2y ago className?: string;
17 912d3dc Mrdn 2y ago tooltipMsg?: string;
18 857e289 Mrdn 2y ago }
19 857e289 Mrdn 2y ago
20 857e289 Mrdn 2y ago export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
21 857e289 Mrdn 2y ago text,
22 857e289 Mrdn 2y ago disabled = false,
23 857e289 Mrdn 2y ago successMessage,
24 857e289 Mrdn 2y ago copyIcon,
25 857e289 Mrdn 2y ago copyLabel,
26 912d3dc Mrdn 2y ago errorLabel, className,
27 912d3dc Mrdn 2y ago tooltipMsg
28 857e289 Mrdn 2y ago }) => {
29 857e289 Mrdn 2y ago const { t } = useTranslation();
30 857e289 Mrdn 2y ago const [copied, setCopied] = useState(false);
31 857e289 Mrdn 2y ago const [healthy, setHealthy] = useState(false);
32 857e289 Mrdn 2y ago
33 857e289 Mrdn 2y ago useEffect(() => {
34 857e289 Mrdn 2y ago if (copied) {
35 857e289 Mrdn 2y ago toast.success(t(successMessage));
36 857e289 Mrdn 2y ago setTimeout(() => {
37 857e289 Mrdn 2y ago setCopied(false);
38 857e289 Mrdn 2y ago }, 1000);
39 857e289 Mrdn 2y ago }
40 857e289 Mrdn 2y ago }, [copied, successMessage, t]);
41 857e289 Mrdn 2y ago
42 857e289 Mrdn 2y ago useEffect(() => {
43 857e289 Mrdn 2y ago setHealthy(text !== '');
44 857e289 Mrdn 2y ago }, [text]);
45 857e289 Mrdn 2y ago
46 857e289 Mrdn 2y ago const handleClick = () => {
47 857e289 Mrdn 2y ago if (!disabled) {
48 857e289 Mrdn 2y ago setCopied(true);
49 857e289 Mrdn 2y ago }
50 857e289 Mrdn 2y ago };
51 857e289 Mrdn 2y ago
52 912d3dc Mrdn 2y ago const tooltip = tooltipMsg ? tooltipMsg : (copyLabel ? copyLabel : undefined)
53 912d3dc Mrdn 2y ago
54 857e289 Mrdn 2y ago const Icon = copied ? CopyCheck : (healthy ? (copyIcon ? copyIcon : ClipboardCopy) : CopyX)
55 912d3dc Mrdn 2y ago const isWithLabel = successMessage && copyLabel && errorLabel
56 857e289 Mrdn 2y ago
57 857e289 Mrdn 2y ago return (
58 912d3dc Mrdn 2y ago <Tooltip>
59 912d3dc Mrdn 2y ago <TooltipTrigger>
60 912d3dc Mrdn 2y ago <CopyToClipboard text={text}>
61 912d3dc Mrdn 2y ago <Button className={cn(className, "p-2 flex flex-row items-center gap-2")} disabled={disabled || !healthy} onClick={handleClick}>
62 912d3dc Mrdn 2y ago <Icon />
63 912d3dc Mrdn 2y ago {isWithLabel && t(copied ? successMessage : (healthy ? copyLabel : errorLabel))}
64 912d3dc Mrdn 2y ago </Button>
65 912d3dc Mrdn 2y ago </CopyToClipboard>
66 912d3dc Mrdn 2y ago </TooltipTrigger>
67 912d3dc Mrdn 2y ago {tooltip &&
68 912d3dc Mrdn 2y ago <TooltipContent>
69 912d3dc Mrdn 2y ago {tooltip}
70 912d3dc Mrdn 2y ago </TooltipContent>
71 912d3dc Mrdn 2y ago }
72 912d3dc Mrdn 2y ago </Tooltip >
73 857e289 Mrdn 2y ago );
74 857e289 Mrdn 2y ago };