83 lines
1.7 KiB
JavaScript
83 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
import FastImage from 'react-native-fast-image';
|
|
import { RectButton } from 'react-native-gesture-handler';
|
|
|
|
import openLink from '../../utils/openLink';
|
|
|
|
const styles = StyleSheet.create({
|
|
button: {
|
|
marginTop: 10
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
borderRadius: 4,
|
|
backgroundColor: '#F3F4F5'
|
|
},
|
|
textContainer: {
|
|
flex: 1,
|
|
flexDirection: 'column',
|
|
padding: 15,
|
|
justifyContent: 'flex-start',
|
|
alignItems: 'flex-start'
|
|
},
|
|
title: {
|
|
fontWeight: '500',
|
|
color: '#1D74F5',
|
|
fontSize: 16,
|
|
marginTop: 5
|
|
},
|
|
description: {
|
|
marginTop: 5,
|
|
fontSize: 16,
|
|
color: '#0C0D0F'
|
|
},
|
|
url: {
|
|
fontSize: 15,
|
|
fontWeight: '500',
|
|
color: '#9EA2A8'
|
|
},
|
|
marginTop: {
|
|
marginTop: 4
|
|
},
|
|
image: {
|
|
width: '100%',
|
|
height: 150,
|
|
borderTopLeftRadius: 4,
|
|
borderTopRightRadius: 4
|
|
}
|
|
});
|
|
|
|
const onPress = (url) => {
|
|
openLink(url);
|
|
};
|
|
const Url = ({ url, index }) => {
|
|
if (!url) {
|
|
return null;
|
|
}
|
|
return (
|
|
<RectButton
|
|
onPress={() => onPress(url.url)}
|
|
style={[styles.button, index > 0 && styles.marginTop, styles.container]}
|
|
activeOpacity={0.5}
|
|
underlayColor='#fff'
|
|
>
|
|
{url.image ? <FastImage source={{ uri: url.image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} /> : null}
|
|
<View style={styles.textContainer}>
|
|
<Text style={styles.url} numberOfLines={1}>{url.url}</Text>
|
|
<Text style={styles.title} numberOfLines={2}>{url.title}</Text>
|
|
<Text style={styles.description} numberOfLines={2}>{url.description}</Text>
|
|
</View>
|
|
</RectButton>
|
|
);
|
|
};
|
|
|
|
Url.propTypes = {
|
|
url: PropTypes.object.isRequired,
|
|
index: PropTypes.number
|
|
};
|
|
|
|
export default Url;
|