forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useMemo} from 'react'
2import {View} from 'react-native'
3import Svg, {Circle, Line} from 'react-native-svg'
4import {AtUri} from '@atproto/api'
5import {useLingui} from '@lingui/react/macro'
6
7import {makeProfileLink} from '#/lib/routes/links'
8import {atoms as a, select, useTheme} from '#/alf'
9import {Link} from '#/components/Link'
10import {SubtleHover} from '#/components/SubtleHover'
11import {Text} from '#/components/Typography'
12
13export function ViewFullThread({uri}: {uri: string}) {
14 const t = useTheme()
15 const itemHref = useMemo(() => {
16 const urip = new AtUri(uri)
17 return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
18 }, [uri])
19 const {t: l} = useLingui()
20
21 return (
22 <Link
23 style={[
24 a.flex_row,
25 {
26 gap: 10,
27 paddingLeft: 18,
28 },
29 ]}
30 to={itemHref}
31 label={l`View full thread`}>
32 {({hovered}) => (
33 <>
34 <SubtleHover
35 hover={hovered}
36 // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn
37 style={{top: 8, bottom: -5}}
38 />
39 <View style={[a.align_center, {width: 42}]}>
40 <Svg width="4" height="40">
41 <Line
42 x1="2"
43 y1="0"
44 x2="2"
45 y2="15"
46 stroke={select(t.name, {
47 light: t.palette.contrast_100,
48 dim: t.palette.contrast_200,
49 dark: t.palette.contrast_200,
50 })}
51 strokeWidth="2"
52 />
53 <Circle cx="2" cy="22" r="1.5" fill={t.palette.contrast_200} />
54 <Circle cx="2" cy="28" r="1.5" fill={t.palette.contrast_200} />
55 <Circle cx="2" cy="34" r="1.5" fill={t.palette.contrast_200} />
56 </Svg>
57 </View>
58 <Text
59 style={[
60 a.text_md,
61 {color: t.palette.primary_500, paddingTop: 18, paddingBottom: 4},
62 ]}>
63 {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
64 {l`View full thread`}
65 </Text>
66 </>
67 )}
68 </Link>
69 )
70}