mirror of https://github.com/tooot-app/app
102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import analytics from '@components/analytics'
|
|
import GracefullyImage from '@components/GracefullyImage'
|
|
import openLink from '@components/openLink'
|
|
import { useNavigation } from '@react-navigation/native'
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React from 'react'
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
|
|
|
export interface Props {
|
|
card: Mastodon.Card
|
|
}
|
|
|
|
const TimelineCard = React.memo(
|
|
({ card }: Props) => {
|
|
const { theme } = useTheme()
|
|
const navigation = useNavigation()
|
|
|
|
return (
|
|
<Pressable
|
|
style={[styles.card, { borderColor: theme.border }]}
|
|
onPress={async () => {
|
|
analytics('timeline_shared_card_press')
|
|
await openLink(card.url, navigation)
|
|
}}
|
|
testID='base'
|
|
>
|
|
{card.image && (
|
|
<GracefullyImage
|
|
uri={{ original: card.image }}
|
|
blurhash={card.blurhash}
|
|
style={styles.left}
|
|
imageStyle={styles.image}
|
|
/>
|
|
)}
|
|
<View style={styles.right}>
|
|
<Text
|
|
numberOfLines={2}
|
|
style={[styles.rightTitle, { color: theme.primaryDefault }]}
|
|
testID='title'
|
|
>
|
|
{card.title}
|
|
</Text>
|
|
{card.description ? (
|
|
<Text
|
|
numberOfLines={1}
|
|
style={[styles.rightDescription, { color: theme.primaryDefault }]}
|
|
testID='description'
|
|
>
|
|
{card.description}
|
|
</Text>
|
|
) : null}
|
|
<Text
|
|
numberOfLines={1}
|
|
style={[styles.rightLink, { color: theme.secondary }]}
|
|
>
|
|
{card.url}
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
},
|
|
() => true
|
|
)
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
height: StyleConstants.Font.LineHeight.M * 5,
|
|
marginTop: StyleConstants.Spacing.M,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderRadius: 6,
|
|
overflow: 'hidden'
|
|
},
|
|
left: {
|
|
flexBasis: StyleConstants.Font.LineHeight.M * 5
|
|
},
|
|
image: {
|
|
borderTopLeftRadius: 6,
|
|
borderBottomLeftRadius: 6
|
|
},
|
|
right: {
|
|
flex: 1,
|
|
padding: StyleConstants.Spacing.S
|
|
},
|
|
rightTitle: {
|
|
...StyleConstants.FontStyle.S,
|
|
marginBottom: StyleConstants.Spacing.XS,
|
|
fontWeight: StyleConstants.Font.Weight.Bold
|
|
},
|
|
rightDescription: {
|
|
...StyleConstants.FontStyle.S,
|
|
marginBottom: StyleConstants.Spacing.XS
|
|
},
|
|
rightLink: {
|
|
...StyleConstants.FontStyle.S
|
|
}
|
|
})
|
|
|
|
export default TimelineCard
|