some small work on the budget screen

components/budget/categoryItem.tsx

@@ -0,0 +1,49 @@
+import { ColorValue, StyleSheet, 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.textSection, {backgroundColor: backgroundColor}]}>
+
+
+
+            </View>
+
+
+            <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
+
+            </View>
+        </CustomCard>
+    );
+};
+
+export default CategoryItem;
+
+const styles = StyleSheet.create({
+    textSection: {
+        flexDirection: "column",
+        alignContent: "space-between",
+        alignItems:"flex-start",
+        paddingLeft: 10,
+        flex:1,
+        alignSelf: "stretch",
+        paddingVertical: 5
+      },
+      valueSection: {
+        justifyContent:"center",
+        borderTopRightRadius: 20,
+        borderBottomRightRadius: 20,
+      }
+});