You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

87 lines
2.0 KiB

import {
View,
Text,
Image,
TouchableOpacity,
Platform,
Dimensions,
} from "react-native";
import React from "react";
import { connect } from "react-redux";
//style
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios";
const { height, width } = Dimensions.get("window");
const Box = ({ info, mobile }) => {
console.log(info);
return (
<TouchableOpacity
style={[
tw(
`flex flex-row-reverse rounded-md mt-4 ${
mobile ? "py-3 px-3" : "py-5 px-5"
}`
),
{
backgroundColor: info.bg,
borderColor: info.borderColor,
borderWidth: 1,
},
]}
onPress={() => info?.onPress()}
>
<Image
source={info.icon}
style={{ width: mobile ? 40 : 55, height: mobile ? 40 : 55 }}
/>
<View style={tw("flex flex-1 mr-3")}>
<Text
style={{
fontFamily: "bold",
fontSize: mobile ? fontSize.lg : fontSize.xl3,
color: info.title.color,
textAlign: ios ? "right" : "auto",
}}
>
{info.title.text}
</Text>
<Text
style={[
tw("mt-1"),
{
fontFamily: "light",
fontSize: mobile ? fontSize.tiny : fontSize.lg,
color: info.description.color,
textAlign: ios ? "right" : "auto",
},
]}
>
{info.description.text}
</Text>
<Text
style={[
tw("self-start mt-2.5"),
{
fontFamily: "demi",
fontSize: mobile ? fontSize.sm : fontSize.lg,
color: info?.link?.color,
},
]}
>
{info?.link?.title}
</Text>
</View>
</TouchableOpacity>
);
};
const mapStateToProps = (state) => ({
mobile: state.publicApi.mobile,
});
export default connect(mapStateToProps)(Box);