gitscope
/
← marzneshin / app/dashboard/src/pages/users/table/action-buttons.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/users/table/action-buttons.tsx · v0.1.2
Source
1 63b702d Mardin 2y ago
2 63b702d Mardin 2y ago import { t } from 'i18next';
3 63b702d Mardin 2y ago import CopyToClipboard from 'react-copy-to-clipboard';
4 63b702d Mardin 2y ago import { User } from 'types';
5 63b702d Mardin 2y ago import {
6 63b702d Mardin 2y ago CopiedIcon,
7 63b702d Mardin 2y ago CopyIcon,
8 63b702d Mardin 2y ago QRIcon,
9 63b702d Mardin 2y ago SubscriptionLinkIcon
10 63b702d Mardin 2y ago } from 'components/table';
11 63b702d Mardin 2y ago import {
12 63b702d Mardin 2y ago HStack,
13 63b702d Mardin 2y ago IconButton,
14 63b702d Mardin 2y ago Tooltip,
15 63b702d Mardin 2y ago } from '@chakra-ui/react';
16 63b702d Mardin 2y ago import { FC, useEffect, useState } from 'react';
17 63b702d Mardin 2y ago import { useUsers } from 'stores';
18 63b702d Mardin 2y ago
19 63b702d Mardin 2y ago type ActionButtonsProps = {
20 63b702d Mardin 2y ago user: User;
21 63b702d Mardin 2y ago };
22 63b702d Mardin 2y ago
23 63b702d Mardin 2y ago export const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
24 63b702d Mardin 2y ago const { setQRCode, setSubLink } = useUsers();
25 63b702d Mardin 2y ago
26 63b702d Mardin 2y ago const proxyLinks = user.links.join('\r\n');
27 63b702d Mardin 2y ago
28 63b702d Mardin 2y ago const [copied, setCopied] = useState([-1, false]);
29 63b702d Mardin 2y ago useEffect(() => {
30 63b702d Mardin 2y ago if (copied[1]) {
31 63b702d Mardin 2y ago setTimeout(() => {
32 63b702d Mardin 2y ago setCopied([-1, false]);
33 63b702d Mardin 2y ago }, 1000);
34 63b702d Mardin 2y ago }
35 63b702d Mardin 2y ago }, [copied]);
36 63b702d Mardin 2y ago return (
37 63b702d Mardin 2y ago <HStack
38 63b702d Mardin 2y ago justifyContent="flex-end"
39 63b702d Mardin 2y ago onClick={(e) => {
40 63b702d Mardin 2y ago e.preventDefault();
41 63b702d Mardin 2y ago e.stopPropagation();
42 63b702d Mardin 2y ago }}
43 63b702d Mardin 2y ago >
44 63b702d Mardin 2y ago <CopyToClipboard
45 63b702d Mardin 2y ago text={
46 63b702d Mardin 2y ago user.subscription_url.startsWith('/')
47 63b702d Mardin 2y ago ? window.location.origin + user.subscription_url
48 63b702d Mardin 2y ago : user.subscription_url
49 63b702d Mardin 2y ago }
50 63b702d Mardin 2y ago onCopy={() => {
51 63b702d Mardin 2y ago setCopied([0, true]);
52 63b702d Mardin 2y ago }}
53 63b702d Mardin 2y ago >
54 63b702d Mardin 2y ago <div>
55 63b702d Mardin 2y ago <Tooltip
56 63b702d Mardin 2y ago label={
57 63b702d Mardin 2y ago copied[0] == 0 && copied[1]
58 63b702d Mardin 2y ago ? t('usersTable.copied')
59 63b702d Mardin 2y ago : t('usersTable.copyLink')
60 63b702d Mardin 2y ago }
61 63b702d Mardin 2y ago placement="top"
62 63b702d Mardin 2y ago >
63 63b702d Mardin 2y ago <IconButton
64 63b702d Mardin 2y ago p="0 !important"
65 63b702d Mardin 2y ago aria-label="copy subscription link"
66 63b702d Mardin 2y ago bg="transparent"
67 63b702d Mardin 2y ago _dark={{
68 63b702d Mardin 2y ago _hover: {
69 63b702d Mardin 2y ago bg: 'gray.700',
70 63b702d Mardin 2y ago },
71 63b702d Mardin 2y ago }}
72 63b702d Mardin 2y ago size={{
73 63b702d Mardin 2y ago base: 'sm',
74 63b702d Mardin 2y ago md: 'md',
75 63b702d Mardin 2y ago }}
76 63b702d Mardin 2y ago >
77 63b702d Mardin 2y ago {copied[0] == 0 && copied[1] ? (
78 63b702d Mardin 2y ago <CopiedIcon />
79 63b702d Mardin 2y ago ) : (
80 63b702d Mardin 2y ago <SubscriptionLinkIcon />
81 63b702d Mardin 2y ago )}
82 63b702d Mardin 2y ago </IconButton>
83 63b702d Mardin 2y ago </Tooltip>
84 63b702d Mardin 2y ago </div>
85 63b702d Mardin 2y ago </CopyToClipboard>
86 63b702d Mardin 2y ago <CopyToClipboard
87 63b702d Mardin 2y ago text={proxyLinks}
88 63b702d Mardin 2y ago onCopy={() => {
89 63b702d Mardin 2y ago setCopied([1, true]);
90 63b702d Mardin 2y ago }}
91 63b702d Mardin 2y ago >
92 63b702d Mardin 2y ago <div>
93 63b702d Mardin 2y ago <Tooltip
94 63b702d Mardin 2y ago label={
95 63b702d Mardin 2y ago copied[0] == 1 && copied[1]
96 63b702d Mardin 2y ago ? t('usersTable.copied')
97 63b702d Mardin 2y ago : t('usersTable.copyConfigs')
98 63b702d Mardin 2y ago }
99 63b702d Mardin 2y ago placement="top"
100 63b702d Mardin 2y ago >
101 63b702d Mardin 2y ago <IconButton
102 63b702d Mardin 2y ago p="0 !important"
103 63b702d Mardin 2y ago aria-label="copy configs"
104 63b702d Mardin 2y ago bg="transparent"
105 63b702d Mardin 2y ago _dark={{
106 63b702d Mardin 2y ago _hover: {
107 63b702d Mardin 2y ago bg: 'gray.700',
108 63b702d Mardin 2y ago },
109 63b702d Mardin 2y ago }}
110 63b702d Mardin 2y ago size={{
111 63b702d Mardin 2y ago base: 'sm',
112 63b702d Mardin 2y ago md: 'md',
113 63b702d Mardin 2y ago }}
114 63b702d Mardin 2y ago >
115 63b702d Mardin 2y ago {copied[0] == 1 && copied[1] ? <CopiedIcon /> : <CopyIcon />}
116 63b702d Mardin 2y ago </IconButton>
117 63b702d Mardin 2y ago </Tooltip>
118 63b702d Mardin 2y ago </div>
119 63b702d Mardin 2y ago </CopyToClipboard>
120 63b702d Mardin 2y ago <Tooltip label="QR Code" placement="top">
121 63b702d Mardin 2y ago <IconButton
122 63b702d Mardin 2y ago p="0 !important"
123 63b702d Mardin 2y ago aria-label="qr code"
124 63b702d Mardin 2y ago bg="transparent"
125 63b702d Mardin 2y ago _dark={{
126 63b702d Mardin 2y ago _hover: {
127 63b702d Mardin 2y ago bg: 'gray.700',
128 63b702d Mardin 2y ago },
129 63b702d Mardin 2y ago }}
130 63b702d Mardin 2y ago size={{
131 63b702d Mardin 2y ago base: 'sm',
132 63b702d Mardin 2y ago md: 'md',
133 63b702d Mardin 2y ago }}
134 63b702d Mardin 2y ago onClick={() => {
135 63b702d Mardin 2y ago setQRCode(user.links);
136 63b702d Mardin 2y ago setSubLink(user.subscription_url);
137 63b702d Mardin 2y ago }}
138 63b702d Mardin 2y ago >
139 63b702d Mardin 2y ago <QRIcon />
140 63b702d Mardin 2y ago </IconButton>
141 63b702d Mardin 2y ago </Tooltip>
142 63b702d Mardin 2y ago </HStack >
143 63b702d Mardin 2y ago );
144 63b702d Mardin 2y ago };