ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {lazy} from 'react'
2import {View} from 'react-native'
3// @ts-expect-error missing types
4import QRCode from 'react-native-qrcode-styled'
5import type ViewShot from 'react-native-view-shot'
6import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
7import {Trans} from '@lingui/macro'
8
9import {isWeb} from '#/platform/detection'
10import {Logo} from '#/view/icons/Logo'
11import {Logotype} from '#/view/icons/Logotype'
12import {useTheme} from '#/alf'
13import {atoms as a} from '#/alf'
14import {LinearGradientBackground} from '#/components/LinearGradientBackground'
15import {Text} from '#/components/Typography'
16import * as bsky from '#/types/bsky'
17
18const LazyViewShot = lazy(
19 // @ts-expect-error dynamic import
20 () => import('react-native-view-shot/src/index'),
21)
22
23export function QrCode({
24 starterPack,
25 link,
26 ref,
27}: {
28 starterPack: AppBskyGraphDefs.StarterPackView
29 link: string
30 ref: React.Ref<ViewShot>
31}) {
32 const {record} = starterPack
33
34 if (
35 !bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
36 record,
37 AppBskyGraphStarterpack.isRecord,
38 )
39 ) {
40 return null
41 }
42
43 return (
44 <LazyViewShot ref={ref}>
45 <LinearGradientBackground
46 style={[
47 {width: 300, minHeight: 390},
48 a.align_center,
49 a.px_sm,
50 a.py_xl,
51 a.rounded_sm,
52 a.justify_between,
53 a.gap_md,
54 ]}>
55 <View style={[a.gap_sm]}>
56 <Text
57 style={[
58 a.font_semi_bold,
59 a.text_3xl,
60 a.text_center,
61 {color: 'white'},
62 ]}>
63 {record.name}
64 </Text>
65 </View>
66 <View style={[a.gap_xl, a.align_center]}>
67 <Text
68 style={[
69 a.font_semi_bold,
70 a.text_center,
71 {color: 'white', fontSize: 18},
72 ]}>
73 <Trans>Join the conversation</Trans>
74 </Text>
75 <View style={[a.rounded_sm, a.overflow_hidden]}>
76 <QrCodeInner link={link} />
77 </View>
78
79 <Text
80 style={[
81 a.flex,
82 a.flex_row,
83 a.align_center,
84 a.font_semi_bold,
85 {color: 'white', fontSize: 18, gap: 6},
86 ]}>
87 <Trans>
88 on
89 <View style={[a.flex_row, a.align_center, {gap: 6}]}>
90 <Logo width={25} fill="white" />
91 <View style={[{marginTop: 3.5}]}>
92 <Logotype width={72} fill="white" />
93 </View>
94 </View>
95 </Trans>
96 </Text>
97 </View>
98 </LinearGradientBackground>
99 </LazyViewShot>
100 )
101}
102
103export function QrCodeInner({link}: {link: string}) {
104 const t = useTheme()
105
106 return (
107 <QRCode
108 data={link}
109 style={[
110 a.rounded_sm,
111 {height: 225, width: 225, backgroundColor: '#f3f3f3'},
112 ]}
113 pieceSize={isWeb ? 8 : 6}
114 padding={20}
115 // pieceLiquidRadius={2}
116 pieceBorderRadius={isWeb ? 4.5 : 3.5}
117 outerEyesOptions={{
118 topLeft: {
119 borderRadius: [12, 12, 0, 12],
120 color: t.palette.primary_500,
121 },
122 topRight: {
123 borderRadius: [12, 12, 12, 0],
124 color: t.palette.primary_500,
125 },
126 bottomLeft: {
127 borderRadius: [12, 0, 12, 12],
128 color: t.palette.primary_500,
129 },
130 }}
131 innerEyesOptions={{borderRadius: 3}}
132 logo={{
133 href: require('../../../assets/logo.png'),
134 scale: 0.95,
135 padding: 2,
136 hidePieces: true,
137 }}
138 />
139 )
140}