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.
91 lines
2.3 KiB
91 lines
2.3 KiB
import { |
|
View, |
|
Text, |
|
Dimensions, |
|
TouchableOpacity, |
|
Appearance, |
|
} from "react-native"; |
|
import { Entypo } from "@expo/vector-icons"; |
|
import { connect } from "react-redux"; |
|
//style |
|
import tw from "tailwind-rn"; |
|
import fontSize from "../../../constants/fontSize"; |
|
import Colors from "../../../constants/Colors"; |
|
|
|
const { width } = Dimensions.get("window"); |
|
|
|
function Instance({ question, selectFaq, mobile }) { |
|
const colorScheme = Appearance.getColorScheme(); |
|
return ( |
|
<TouchableOpacity |
|
onPress={() => selectFaq(question.id)} |
|
style={[ |
|
tw( |
|
`w-full flex my-1.5 rounded-md px-4 ${ |
|
mobile ? "py-2" : "py-3" |
|
}` |
|
), |
|
{ |
|
backgroundColor: !question.active |
|
? "#F9F9F9" |
|
: Colors.theme1[colorScheme].greenCF + "0a", |
|
borderColor: !question.active |
|
? "#DBDBDB" |
|
: Colors.theme1[colorScheme].greenCF, |
|
borderWidth: 1.5, |
|
}, |
|
]} |
|
> |
|
<View style={tw("flex flex-row-reverse justify-between items-center")}> |
|
<Text |
|
style={[ |
|
{ |
|
width: "90%", |
|
textAlign: "right", |
|
color: Colors.theme1[colorScheme].green79, |
|
fontSize: mobile ? fontSize.tiny : fontSize.lg, |
|
fontFamily: "bold", |
|
}, |
|
]} |
|
> |
|
{question.title} |
|
</Text> |
|
{question.active ? ( |
|
<Entypo |
|
name="minus" |
|
size={18} |
|
color={Colors.theme1[colorScheme].green79} |
|
/> |
|
) : ( |
|
<Entypo |
|
name="plus" |
|
size={18} |
|
color={Colors.theme1[colorScheme].green79} |
|
/> |
|
)} |
|
</View> |
|
{question.active && ( |
|
<View style={tw("w-full flex flex-row-reverse pt-2")}> |
|
<Text |
|
style={[ |
|
{ |
|
color: Colors.theme1[colorScheme].green79, |
|
fontSize: mobile ? fontSize.tiny : fontSize.lg, |
|
fontFamily: "light", |
|
}, |
|
tw("text-right flex-1"), |
|
]} |
|
> |
|
{question.description} |
|
</Text> |
|
</View> |
|
)} |
|
</TouchableOpacity> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
mobile: state.publicApi.mobile, |
|
}); |
|
|
|
export default connect(mapStateToProps)(Instance);
|
|
|