Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
2.2 kB · 75 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576import React from 'react'import {StyleSheet, View} from 'react-native'import Svg, {Circle, Line} from 'react-native-svg'import {AtUri} from '@atproto/api'import {msg} from '@lingui/macro'import {useLingui} from '@lingui/react'
import {usePalette} from '#/lib/hooks/usePalette'import {makeProfileLink} from '#/lib/routes/links'import {useInteractionState} from '#/components/hooks/useInteractionState'import {SubtleHover} from '#/components/SubtleHover'import {Link} from '../util/Link'import {Text} from '../util/text/Text'
export function ViewFullThread({uri}: {uri: string}) { const { state: hover, onIn: onHoverIn, onOut: onHoverOut, } = useInteractionState() const pal = usePalette('default') const itemHref = React.useMemo(() => { const urip = new AtUri(uri) return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey) }, [uri]) const {_} = useLingui()
return ( <Link style={[styles.viewFullThread]} href={itemHref} asAnchor noFeedback onPointerEnter={onHoverIn} onPointerLeave={onHoverOut}> <SubtleHover hover={hover} // adjust position for visual alignment - the actual box has lots of top padding and not much bottom padding -sfn style={{top: 8, bottom: -5}} /> <View style={styles.viewFullThreadDots}> <Svg width="4" height="40"> <Line x1="2" y1="0" x2="2" y2="15" stroke={pal.colors.replyLine} strokeWidth="2" /> <Circle cx="2" cy="22" r="1.5" fill={pal.colors.replyLineDot} /> <Circle cx="2" cy="28" r="1.5" fill={pal.colors.replyLineDot} /> <Circle cx="2" cy="34" r="1.5" fill={pal.colors.replyLineDot} /> </Svg> </View>
<Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}> {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */} {_(msg`View full thread`)} </Text> </Link> )}
const styles = StyleSheet.create({ viewFullThread: { flexDirection: 'row', gap: 10, paddingLeft: 18, }, viewFullThreadDots: { width: 42, alignItems: 'center', },})