63 lines
No EOL
1.6 KiB
TypeScript
63 lines
No EOL
1.6 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.colorTipStyle, {backgroundColor: properties.color}]}></View>
|
|
<View style={[styles.textViewStyle]}>
|
|
<Text style={[styles.textViewTextStyle, {color: textColor}]}>
|
|
{properties.category}
|
|
</Text>
|
|
</View>
|
|
|
|
|
|
<View style={[styles.valueViewStyle]}>
|
|
<Text style={[styles.valueViewTextStyle, {color: textColor}]}>
|
|
10/100$
|
|
{/* {properties.allocated_account} */}
|
|
</Text>
|
|
</View>
|
|
</CustomCard>
|
|
);
|
|
};
|
|
|
|
export default CategoryItem;
|
|
|
|
const styles = StyleSheet.create({
|
|
colorTipStyle: {
|
|
width: 25,
|
|
borderTopLeftRadius: 10,
|
|
borderBottomLeftRadius: 10,
|
|
},
|
|
textViewStyle: {
|
|
paddingVertical: 5,
|
|
paddingLeft: 10,
|
|
alignSelf: "stretch",
|
|
},
|
|
textViewTextStyle: {
|
|
fontSize: 30,
|
|
fontWeight: "bold",
|
|
},
|
|
valueViewStyle: {
|
|
alignSelf: "stretch",
|
|
flex: 1,
|
|
flexDirection: "row-reverse",
|
|
alignItems: "center",
|
|
paddingHorizontal: 10,
|
|
},
|
|
valueViewTextStyle: {
|
|
fontSize: 20,
|
|
}
|
|
}) |