53 lines
No EOL
1.4 KiB
TypeScript
53 lines
No EOL
1.4 KiB
TypeScript
import { ColorValue, StyleSheet, Text, View } from "react-native";
|
|
import { useThemeColor } from "../../hooks/useThemeColor";
|
|
import CustomCard from "../common/CustomCard";
|
|
|
|
export type CategoryItemProps = {
|
|
category: string,
|
|
color: ColorValue,
|
|
allocated_account: number,
|
|
}
|
|
|
|
const CategoryItem = (properties: CategoryItemProps) => {
|
|
|
|
const textColor = useThemeColor("primaryText");
|
|
const backgroundColor = useThemeColor("backgroundColor");
|
|
|
|
return (
|
|
<CustomCard>
|
|
<View style={[styles.colorTip, {backgroundColor: properties.color}]}></View>
|
|
<View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
|
|
<Text style={[styles.textSection, {color: textColor}]}>{properties.category}</Text>
|
|
</View>
|
|
|
|
|
|
<View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
|
|
|
|
</View>
|
|
</CustomCard>
|
|
);
|
|
};
|
|
|
|
export default CategoryItem;
|
|
|
|
const styles = StyleSheet.create({
|
|
colorTip: {
|
|
width: 20,
|
|
borderTopLeftRadius: 20,
|
|
borderBottomLeftRadius: 20,
|
|
},
|
|
textSection: {
|
|
flexDirection: "column",
|
|
alignContent: "space-between",
|
|
alignItems:"flex-start",
|
|
paddingLeft: 10,
|
|
flex:1,
|
|
alignSelf: "stretch",
|
|
paddingVertical: 5
|
|
},
|
|
valueSection: {
|
|
justifyContent:"center",
|
|
borderTopRightRadius: 20,
|
|
borderBottomRightRadius: 20,
|
|
}
|
|
}) |