Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 14x 1x | /**
* @fileoverview Single category display view for the SettingsScreen component
* @module SettingCategoryDisplay
* @description Display of a single category of the SettingsScreen component
* @requires react react-native
*/
import React from 'react'
import { Image, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
import FastImage from 'react-native-fast-image'
import colors from '@global/colors'
import images from '@global/images'
type Props = {
id: number
title: string
subtitle?: string
onPress?: () => void
icon?: React.ReactNode
childrenIcon?: React.ReactNode
backIconColor?: string
iconColor?: string
}
/**
* @function SettingCategoryDisplay
* @param id The id of the category
* @param title The title of the category
* @param subtitle The subtitle of the category
* @param onPress The function that is called when the category is pressed
* @param icon The icon of the category
* @param childrenIcon The icon of the category's children
* @param backIconColor The color of the back icon
* @param iconColor The color of the icon
* @returns {React.JSX.Element} SettingCategoryDisplay component template
*/
export default function SettingCategoryDisplay({
id,
title,
subtitle,
onPress,
icon,
childrenIcon,
backIconColor = '#FFFCF4',
iconColor = colors.accent,
}: Props): React.JSX.Element {
return (
<Pressable
onPress={onPress}
style={styles.container}
key={id}
>
<View style={[styles.imageContainer, { backgroundColor: backIconColor }]}>
<Image
source={icon as ImageProps['source']}
style={[styles.image, { tintColor: iconColor }]}
/>
</View>
<View style={styles.textContainer}>
<Text style={styles.title}>{title}</Text>
{subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
</View>
{!childrenIcon && (
<FastImage
source={images.icons.outline.backArrow()}
style={styles.penIcon}
/>
)}
{childrenIcon && <View style={styles.childIcon}>{childrenIcon}</View>}
</Pressable>
)
}
const styles = StyleSheet.create({
container: {
width: '100%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
display: 'flex',
padding: 10,
},
imageContainer: {
aspectRatio: 1,
borderRadius: 25,
padding: 10,
flex: 2,
},
image: {
aspectRatio: 1,
flex: 1,
},
textContainer: {
flexDirection: 'column',
flex: 22,
paddingLeft: 12,
},
title: {
fontFamily: 'Poppins',
fontSize: 16,
fontWeight: '500',
},
subtitle: {
fontFamily: 'Poppins',
fontSize: 12,
fontWeight: '300',
color: colors.darkGrey,
},
penIcon: {
height: 16,
aspectRatio: 2 / 3,
flex: 1,
},
childIcon: {
flex: 1,
right: 36,
},
})
|