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