gitscope
/
← marzneshin / app/dashboard/src/pages/hosts/users/modals/qrcode-modals.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/modals/qrcode-modals.tsx · v0.1.1
Source
1 6aab6f0 Mrdn 2y ago import {
2 6aab6f0 Mrdn 2y ago Box,
3 6aab6f0 Mrdn 2y ago chakra,
4 6aab6f0 Mrdn 2y ago HStack,
5 6aab6f0 Mrdn 2y ago IconButton,
6 6aab6f0 Mrdn 2y ago Modal,
7 6aab6f0 Mrdn 2y ago ModalBody,
8 6aab6f0 Mrdn 2y ago ModalCloseButton,
9 6aab6f0 Mrdn 2y ago ModalContent,
10 6aab6f0 Mrdn 2y ago ModalHeader,
11 6aab6f0 Mrdn 2y ago ModalOverlay,
12 6aab6f0 Mrdn 2y ago Text,
13 6aab6f0 Mrdn 2y ago VStack,
14 6aab6f0 Mrdn 2y ago } from '@chakra-ui/react';
15 6aab6f0 Mrdn 2y ago import {
16 6aab6f0 Mrdn 2y ago ChevronLeftIcon,
17 6aab6f0 Mrdn 2y ago ChevronRightIcon,
18 6aab6f0 Mrdn 2y ago QrCodeIcon,
19 6aab6f0 Mrdn 2y ago } from '@heroicons/react/24/outline';
20 6aab6f0 Mrdn 2y ago import { QRCodeCanvas } from 'qrcode.react';
21 6aab6f0 Mrdn 2y ago import { FC, useState } from 'react';
22 6aab6f0 Mrdn 2y ago import { useTranslation } from 'react-i18next';
23 6aab6f0 Mrdn 2y ago import Slider from 'react-slick';
24 6aab6f0 Mrdn 2y ago import 'slick-carousel/slick/slick-theme.css';
25 6aab6f0 Mrdn 2y ago import 'slick-carousel/slick/slick.css';
26 6aab6f0 Mrdn 2y ago import { Icon } from 'components/icon';
27 6aab6f0 Mrdn 2y ago import { useUsers } from 'stores';
28 6aab6f0 Mrdn 2y ago
29 6aab6f0 Mrdn 2y ago const QRCode = chakra(QRCodeCanvas);
30 6aab6f0 Mrdn 2y ago const NextIcon = chakra(ChevronRightIcon, {
31 6aab6f0 Mrdn 2y ago baseStyle: {
32 6aab6f0 Mrdn 2y ago w: 6,
33 6aab6f0 Mrdn 2y ago h: 6,
34 6aab6f0 Mrdn 2y ago color: 'gray.600',
35 6aab6f0 Mrdn 2y ago _dark: {
36 6aab6f0 Mrdn 2y ago color: 'white',
37 6aab6f0 Mrdn 2y ago },
38 6aab6f0 Mrdn 2y ago },
39 6aab6f0 Mrdn 2y ago });
40 6aab6f0 Mrdn 2y ago const PrevIcon = chakra(ChevronLeftIcon, {
41 6aab6f0 Mrdn 2y ago baseStyle: {
42 6aab6f0 Mrdn 2y ago w: 6,
43 6aab6f0 Mrdn 2y ago h: 6,
44 6aab6f0 Mrdn 2y ago color: 'gray.600',
45 6aab6f0 Mrdn 2y ago _dark: {
46 6aab6f0 Mrdn 2y ago color: 'white',
47 6aab6f0 Mrdn 2y ago },
48 6aab6f0 Mrdn 2y ago },
49 6aab6f0 Mrdn 2y ago });
50 6aab6f0 Mrdn 2y ago const QRIcon = chakra(QrCodeIcon, {
51 6aab6f0 Mrdn 2y ago baseStyle: {
52 6aab6f0 Mrdn 2y ago w: 5,
53 6aab6f0 Mrdn 2y ago h: 5,
54 6aab6f0 Mrdn 2y ago },
55 6aab6f0 Mrdn 2y ago });
56 6aab6f0 Mrdn 2y ago
57 6aab6f0 Mrdn 2y ago export const QRCodeDialog: FC = () => {
58 6aab6f0 Mrdn 2y ago const { QRcodeLinks, setQRCode, setSubLink, subscribeUrl } = useUsers();
59 6aab6f0 Mrdn 2y ago const isOpen = QRcodeLinks !== null;
60 6aab6f0 Mrdn 2y ago const [index, setIndex] = useState(0);
61 6aab6f0 Mrdn 2y ago const { t } = useTranslation();
62 6aab6f0 Mrdn 2y ago const onClose = () => {
63 6aab6f0 Mrdn 2y ago setQRCode(null);
64 6aab6f0 Mrdn 2y ago setSubLink(null);
65 6aab6f0 Mrdn 2y ago };
66 6aab6f0 Mrdn 2y ago
67 6aab6f0 Mrdn 2y ago const subscribeQrLink = String(subscribeUrl).startsWith('/')
68 6aab6f0 Mrdn 2y ago ? window.location.origin + subscribeUrl
69 6aab6f0 Mrdn 2y ago : String(subscribeUrl);
70 6aab6f0 Mrdn 2y ago
71 6aab6f0 Mrdn 2y ago return (
72 6aab6f0 Mrdn 2y ago <Modal isOpen={isOpen} onClose={onClose}>
73 6aab6f0 Mrdn 2y ago <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
74 6aab6f0 Mrdn 2y ago <ModalContent mx="3" w="fit-content" maxW="3xl">
75 6aab6f0 Mrdn 2y ago <ModalHeader pt={6}>
76 6aab6f0 Mrdn 2y ago <Icon color="primary">
77 6aab6f0 Mrdn 2y ago <QRIcon color="white" />
78 6aab6f0 Mrdn 2y ago </Icon>
79 6aab6f0 Mrdn 2y ago </ModalHeader>
80 6aab6f0 Mrdn 2y ago <ModalCloseButton mt={3} />
81 6aab6f0 Mrdn 2y ago {QRcodeLinks && (
82 6aab6f0 Mrdn 2y ago <ModalBody
83 6aab6f0 Mrdn 2y ago gap={{
84 6aab6f0 Mrdn 2y ago base: '20px',
85 6aab6f0 Mrdn 2y ago lg: '50px',
86 6aab6f0 Mrdn 2y ago }}
87 6aab6f0 Mrdn 2y ago pr={{
88 6aab6f0 Mrdn 2y ago lg: '60px',
89 6aab6f0 Mrdn 2y ago }}
90 6aab6f0 Mrdn 2y ago px={{
91 6aab6f0 Mrdn 2y ago base: '50px',
92 6aab6f0 Mrdn 2y ago }}
93 6aab6f0 Mrdn 2y ago display="flex"
94 6aab6f0 Mrdn 2y ago justifyContent="center"
95 6aab6f0 Mrdn 2y ago flexDirection={{
96 6aab6f0 Mrdn 2y ago base: 'column',
97 6aab6f0 Mrdn 2y ago lg: 'row',
98 6aab6f0 Mrdn 2y ago }}
99 6aab6f0 Mrdn 2y ago >
100 6aab6f0 Mrdn 2y ago {subscribeUrl && (
101 6aab6f0 Mrdn 2y ago <VStack>
102 6aab6f0 Mrdn 2y ago <QRCode
103 6aab6f0 Mrdn 2y ago mx="auto"
104 6aab6f0 Mrdn 2y ago size={300}
105 6aab6f0 Mrdn 2y ago p="2"
106 6aab6f0 Mrdn 2y ago level={'L'}
107 6aab6f0 Mrdn 2y ago includeMargin={false}
108 6aab6f0 Mrdn 2y ago value={subscribeQrLink}
109 6aab6f0 Mrdn 2y ago bg="white"
110 6aab6f0 Mrdn 2y ago />
111 6aab6f0 Mrdn 2y ago <Text display="block" textAlign="center" pb={3} mt={1}>
112 6aab6f0 Mrdn 2y ago {t('qrcodeDialog.sublink')}
113 6aab6f0 Mrdn 2y ago </Text>
114 6aab6f0 Mrdn 2y ago </VStack>
115 6aab6f0 Mrdn 2y ago )}
116 6aab6f0 Mrdn 2y ago <Box w="300px">
117 6aab6f0 Mrdn 2y ago <Slider
118 6aab6f0 Mrdn 2y ago centerPadding="0px"
119 6aab6f0 Mrdn 2y ago centerMode={true}
120 6aab6f0 Mrdn 2y ago slidesToShow={1}
121 6aab6f0 Mrdn 2y ago slidesToScroll={1}
122 6aab6f0 Mrdn 2y ago dots={false}
123 6aab6f0 Mrdn 2y ago afterChange={setIndex}
124 6aab6f0 Mrdn 2y ago onInit={() => setIndex(0)}
125 6aab6f0 Mrdn 2y ago nextArrow={
126 6aab6f0 Mrdn 2y ago <IconButton
127 6aab6f0 Mrdn 2y ago size="sm"
128 6aab6f0 Mrdn 2y ago position="absolute"
129 6aab6f0 Mrdn 2y ago display="flex !important"
130 6aab6f0 Mrdn 2y ago _before={{ content: '""' }}
131 6aab6f0 Mrdn 2y ago aria-label="next"
132 6aab6f0 Mrdn 2y ago mr="-4"
133 6aab6f0 Mrdn 2y ago >
134 6aab6f0 Mrdn 2y ago <NextIcon />
135 6aab6f0 Mrdn 2y ago </IconButton>
136 6aab6f0 Mrdn 2y ago }
137 6aab6f0 Mrdn 2y ago prevArrow={
138 6aab6f0 Mrdn 2y ago <IconButton
139 6aab6f0 Mrdn 2y ago size="sm"
140 6aab6f0 Mrdn 2y ago position="absolute"
141 6aab6f0 Mrdn 2y ago display="flex !important"
142 6aab6f0 Mrdn 2y ago _before={{ content: '""' }}
143 6aab6f0 Mrdn 2y ago aria-label="prev"
144 6aab6f0 Mrdn 2y ago ml="-4"
145 6aab6f0 Mrdn 2y ago >
146 6aab6f0 Mrdn 2y ago <PrevIcon />
147 6aab6f0 Mrdn 2y ago </IconButton>
148 6aab6f0 Mrdn 2y ago }
149 6aab6f0 Mrdn 2y ago >
150 6aab6f0 Mrdn 2y ago {QRcodeLinks.map((link, i) => {
151 6aab6f0 Mrdn 2y ago return (
152 6aab6f0 Mrdn 2y ago <HStack key={i}>
153 6aab6f0 Mrdn 2y ago <QRCode
154 6aab6f0 Mrdn 2y ago mx="auto"
155 6aab6f0 Mrdn 2y ago size={300}
156 6aab6f0 Mrdn 2y ago p="2"
157 6aab6f0 Mrdn 2y ago level={'L'}
158 6aab6f0 Mrdn 2y ago includeMargin={false}
159 6aab6f0 Mrdn 2y ago value={link}
160 6aab6f0 Mrdn 2y ago bg="white"
161 6aab6f0 Mrdn 2y ago />
162 6aab6f0 Mrdn 2y ago </HStack>
163 6aab6f0 Mrdn 2y ago );
164 6aab6f0 Mrdn 2y ago })}
165 6aab6f0 Mrdn 2y ago </Slider>
166 6aab6f0 Mrdn 2y ago <Text display="block" textAlign="center" pb={3} mt={1}>
167 6aab6f0 Mrdn 2y ago {index + 1} / {QRcodeLinks.length}
168 6aab6f0 Mrdn 2y ago </Text>
169 6aab6f0 Mrdn 2y ago </Box>
170 6aab6f0 Mrdn 2y ago </ModalBody>
171 6aab6f0 Mrdn 2y ago )}
172 6aab6f0 Mrdn 2y ago </ModalContent>
173 6aab6f0 Mrdn 2y ago </Modal>
174 6aab6f0 Mrdn 2y ago );
175 6aab6f0 Mrdn 2y ago };