nasso.dev
my fork of the bluesky client
hailey.at
1import React from 'react'
2import {View} from 'react-native'
3import QRCode from 'react-native-qrcode-styled'
4import type 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
16const LazyViewShot = React.lazy(
17 // @ts-expect-error dynamic import
18 () => import('react-native-view-shot/src/index'),
19)
20
21interface Props {
22 starterPack: AppBskyGraphDefs.StarterPackView
23 link: string
24}
25
26export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
27 {starterPack, link},
28 ref,
29) {
30 const {record} = starterPack
31
32 if (!AppBskyGraphStarterpack.isRecord(record)) {
33 return null
34 }
35
36 return (
37 <LazyViewShot ref={ref}>
38 <LinearGradientBackground
39 style={[
40 {width: 300, minHeight: 390},
41 a.align_center,
42 a.px_sm,
43 a.py_xl,
44 a.rounded_sm,
45 a.justify_between,
46 a.gap_md,
47 ]}>
48 <View style={[a.gap_sm]}>
49 <Text
50 style={[a.font_bold, a.text_3xl, a.text_center, {color: 'white'}]}>
51 {record.name}
52 </Text>
53 </View>
54 <View style={[a.gap_xl, a.align_center]}>
55 <Text
56 style={[
57 a.font_bold,
58 a.text_center,
59 {color: 'white', fontSize: 18},
60 ]}>
61 <Trans>Join the conversation</Trans>
62 </Text>
63 <View style={[a.rounded_sm, a.overflow_hidden]}>
64 <QrCodeInner link={link} />
65 </View>
66
67 <Text
68 style={[
69 a.flex,
70 a.flex_row,
71 a.align_center,
72 a.font_bold,
73 {color: 'white', fontSize: 18, gap: 6},
74 ]}>
75 <Trans>
76 on
77 <View style={[a.flex_row, a.align_center, {gap: 6}]}>
78 <Logo width={25} fill="white" />
79 <View style={[{marginTop: 3.5}]}>
80 <Logotype width={72} fill="white" />
81 </View>
82 </View>
83 </Trans>
84 </Text>
85 </View>
86 </LinearGradientBackground>
87 </LazyViewShot>
88 )
89})
90
91export function QrCodeInner({link}: {link: string}) {
92 const t = useTheme()
93
94 return (
95 <QRCode
96 data={link}
97 style={[
98 a.rounded_sm,
99 {height: 225, width: 225, backgroundColor: '#f3f3f3'},
100 ]}
101 pieceSize={isWeb ? 8 : 6}
102 padding={20}
103 // pieceLiquidRadius={2}
104 pieceBorderRadius={isWeb ? 4.5 : 3.5}
105 outerEyesOptions={{
106 topLeft: {
107 borderRadius: [12, 12, 0, 12],
108 color: t.palette.primary_500,
109 },
110 topRight: {
111 borderRadius: [12, 12, 12, 0],
112 color: t.palette.primary_500,
113 },
114 bottomLeft: {
115 borderRadius: [12, 0, 12, 12],
116 color: t.palette.primary_500,
117 },
118 }}
119 innerEyesOptions={{borderRadius: 3}}
120 logo={{
121 href: require('../../../assets/logo.png'),
122 scale: 0.95,
123 padding: 2,
124 hidePieces: true,
125 }}
126 />
127 )
128}