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