mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
lenooby09.tech
1import React from 'react'
2import {StyleSheet, View} from 'react-native'
3import Svg, {Circle, Line} from 'react-native-svg'
4import {AtUri} from '@atproto/api'
5import {Trans} from '@lingui/macro'
6
7import {usePalette} from '#/lib/hooks/usePalette'
8import {makeProfileLink} from '#/lib/routes/links'
9import {useInteractionState} from '#/components/hooks/useInteractionState'
10import {SubtleWebHover} from '#/components/SubtleWebHover'
11import {Link} from '../util/Link'
12import {Text} from '../util/text/Text'
13
14export function ViewFullThread({uri}: {uri: string}) {
15 const {
16 state: hover,
17 onIn: onHoverIn,
18 onOut: onHoverOut,
19 } = useInteractionState()
20 const pal = usePalette('default')
21 const itemHref = React.useMemo(() => {
22 const urip = new AtUri(uri)
23 return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
24 }, [uri])
25
26 return (
27 <Link
28 style={[styles.viewFullThread]}
29 href={itemHref}
30 asAnchor
31 noFeedback
32 onPointerEnter={onHoverIn}
33 onPointerLeave={onHoverOut}>
34 <SubtleWebHover
35 hover={hover}
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={styles.viewFullThreadDots}>
40 <Svg width="4" height="40">
41 <Line
42 x1="2"
43 y1="0"
44 x2="2"
45 y2="15"
46 stroke={pal.colors.replyLine}
47 strokeWidth="2"
48 />
49 <Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} />
50 <Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} />
51 <Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} />
52 </Svg>
53 </View>
54
55 <Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
56 <Trans>View full thread</Trans>
57 </Text>
58 </Link>
59 )
60}
61
62const styles = StyleSheet.create({
63 viewFullThread: {
64 flexDirection: 'row',
65 gap: 10,
66 paddingLeft: 18,
67 },
68 viewFullThreadDots: {
69 width: 42,
70 alignItems: 'center',
71 },
72})