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