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