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