Resolve "Budget"

components/budget/categoryItem.tsx

@@ -0,0 +1,56 @@
+import { ColorValue, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../app/contexts/ThemeContext";
+import CustomCard from "../common/CustomCard";
+
+export type CategoryItemProps = {
+    category: string,
+    color: ColorValue,
+    allocated_amount: number,
+    total_expenses: number,
+    category_guid: string, 
+}
+
+const CategoryItem = (properties: CategoryItemProps) => {
+  
+    const { colors } = useTheme();
+
+    const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;
+
+    return (
+        <CustomCard> 
+            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
+            <View style={[styles.textViewStyle]}>
+                <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
+                  {properties.category}
+                </Text>
+                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
+                  {subText}
+                </Text>
+            </View>
+        </CustomCard>
+    );
+};
+
+export default CategoryItem;
+
+const styles = StyleSheet.create({
+    colorTipStyle: {
+      width: 25,
+      borderTopLeftRadius: 10,
+      borderBottomLeftRadius: 10,
+    },
+    textViewStyle: {
+      flex: 2,
+      flexDirection: "column",
+      paddingVertical: 5,
+      paddingHorizontal: 10,
+      alignSelf: "stretch",
+    },
+    categoryNameStyle: {
+      fontSize: 30,
+      fontWeight: "bold",
+    },
+    subTextStyle: {
+      fontSize: 17.5,
+    }
+  })