mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {View} from 'react-native'
3import QRCode from 'react-native-qrcode-styled'
4import ViewShot from 'react-native-view-shot'
5import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
6import {Trans} from '@lingui/macro'
7
8import {isWeb} from 'platform/detection'
9import {Logo} from 'view/icons/Logo'
10import {Logotype} from 'view/icons/Logotype'
11import {useTheme} from '#/alf'
12import {atoms as a} from '#/alf'
13import {LinearGradientBackground} from '#/components/LinearGradientBackground'
14import {Text} from '#/components/Typography'
15
16interface Props {
17 starterPack: AppBskyGraphDefs.StarterPackView
18 link: string
19}
20
21export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
22 {starterPack, link},
23 ref,
24) {
25 const {record} = starterPack
26
27 if (!AppBskyGraphStarterpack.isRecord(record)) {
28 return null
29 }
30
31 return (
32 <ViewShot ref={ref}>
33 <LinearGradientBackground
34 style={[
35 {width: 300, minHeight: 390},
36 a.align_center,
37 a.px_sm,
38 a.py_xl,
39 a.rounded_sm,
40 a.justify_between,
41 a.gap_md,
42 ]}>
43 <View style={[a.gap_sm]}>
44 <Text
45 style={[a.font_bold, a.text_3xl, a.text_center, {color: 'white'}]}>
46 {record.name}
47 </Text>
48 </View>
49 <View style={[a.gap_xl, a.align_center]}>
50 <Text
51 style={[
52 a.font_bold,
53 a.text_center,
54 {color: 'white', fontSize: 18},
55 ]}>
56 <Trans>Join the conversation</Trans>
57 </Text>
58 <View style={[a.rounded_sm, a.overflow_hidden]}>
59 <QrCodeInner link={link} />
60 </View>
61
62 <View style={[a.flex_row, a.align_center, {gap: 5}]}>
63 <Text
64 style={[
65 a.font_bold,
66 a.text_center,
67 {color: 'white', fontSize: 18},
68 ]}>
69 <Trans>on</Trans>
70 </Text>
71 <Logo width={26} fill="white" />
72 <View style={[{marginTop: 5, marginLeft: 2.5}]}>
73 <Logotype width={68} fill="white" />
74 </View>
75 </View>
76 </View>
77 </LinearGradientBackground>
78 </ViewShot>
79 )
80})
81
82export function QrCodeInner({link}: {link: string}) {
83 const t = useTheme()
84
85 return (
86 <QRCode
87 data={link}
88 style={[
89 a.rounded_sm,
90 {height: 225, width: 225, backgroundColor: '#f3f3f3'},
91 ]}
92 pieceSize={isWeb ? 8 : 6}
93 padding={20}
94 // pieceLiquidRadius={2}
95 pieceBorderRadius={isWeb ? 4.5 : 3.5}
96 outerEyesOptions={{
97 topLeft: {
98 borderRadius: [12, 12, 0, 12],
99 color: t.palette.primary_500,
100 },
101 topRight: {
102 borderRadius: [12, 12, 12, 0],
103 color: t.palette.primary_500,
104 },
105 bottomLeft: {
106 borderRadius: [12, 0, 12, 12],
107 color: t.palette.primary_500,
108 },
109 }}
110 innerEyesOptions={{borderRadius: 3}}
111 logo={{
112 href: require('../../../assets/logo.png'),
113 scale: 0.95,
114 padding: 2,
115 hidePieces: true,
116 }}
117 />
118 )
119}