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-alpha2
Source
1 857e289 Mrdn 2y ago import { Button } 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 857e289 Mrdn 2y ago copyLabel: string;
15 857e289 Mrdn 2y ago errorLabel: string;
16 857e289 Mrdn 2y ago className?: string;
17 857e289 Mrdn 2y ago }
18 857e289 Mrdn 2y ago
19 857e289 Mrdn 2y ago export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
20 857e289 Mrdn 2y ago text,
21 857e289 Mrdn 2y ago disabled = false,
22 857e289 Mrdn 2y ago successMessage,
23 857e289 Mrdn 2y ago copyIcon,
24 857e289 Mrdn 2y ago copyLabel,
25 857e289 Mrdn 2y ago errorLabel, className
26 857e289 Mrdn 2y ago }) => {
27 857e289 Mrdn 2y ago const { t } = useTranslation();
28 857e289 Mrdn 2y ago const [copied, setCopied] = useState(false);
29 857e289 Mrdn 2y ago const [healthy, setHealthy] = useState(false);
30 857e289 Mrdn 2y ago
31 857e289 Mrdn 2y ago useEffect(() => {
32 857e289 Mrdn 2y ago if (copied) {
33 857e289 Mrdn 2y ago toast.success(t(successMessage));
34 857e289 Mrdn 2y ago setTimeout(() => {
35 857e289 Mrdn 2y ago setCopied(false);
36 857e289 Mrdn 2y ago }, 1000);
37 857e289 Mrdn 2y ago }
38 857e289 Mrdn 2y ago }, [copied, successMessage, t]);
39 857e289 Mrdn 2y ago
40 857e289 Mrdn 2y ago useEffect(() => {
41 857e289 Mrdn 2y ago setHealthy(text !== '');
42 857e289 Mrdn 2y ago }, [text]);
43 857e289 Mrdn 2y ago
44 857e289 Mrdn 2y ago const handleClick = () => {
45 857e289 Mrdn 2y ago if (!disabled) {
46 857e289 Mrdn 2y ago setCopied(true);
47 857e289 Mrdn 2y ago }
48 857e289 Mrdn 2y ago };
49 857e289 Mrdn 2y ago
50 857e289 Mrdn 2y ago const Icon = copied ? CopyCheck : (healthy ? (copyIcon ? copyIcon : ClipboardCopy) : CopyX)
51 857e289 Mrdn 2y ago
52 857e289 Mrdn 2y ago return (
53 857e289 Mrdn 2y ago <CopyToClipboard text={text}>
54 857e289 Mrdn 2y ago <Button className={cn(className, "p-2 flex flex-row items-center gap-2")} disabled={disabled || !healthy} onClick={handleClick}>
55 857e289 Mrdn 2y ago <Icon />
56 857e289 Mrdn 2y ago {t(copied ? successMessage : (healthy ? copyLabel : errorLabel))}
57 857e289 Mrdn 2y ago </Button>
58 857e289 Mrdn 2y ago </CopyToClipboard>
59 857e289 Mrdn 2y ago );
60 857e289 Mrdn 2y ago };