feat: ExpenseItem on Home Screen

components/common/customCard/CustomCard.tsx

@@ -0,0 +1,23 @@
+import { View, Text, StyleSheet } from 'react-native'
+import React from 'react'
+import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
+import { useThemeColor } from '../../../hooks/hooks'
+import { SHADOWS } from '../../../constants/theme'
+
+export default function CustomCard(props : ViewProps) {
+  return (
+    <View style={[styles.container, SHADOWS.light, props.style]}>
+      {props.children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container:{
+    flexDirection: "row",
+    alignItems: "stretch",
+    alignContent: "space-between",
+    borderRadius: 20,
+    marginHorizontal: 10
+  }
+})

components/home/expenseItem/expenseItem.tsx

@@ -0,0 +1,61 @@
+import { View, Text, StyleSheet, ColorValue } from 'react-native'
+import React from 'react'
+import { useThemeColor } from '../../../hooks/hooks';
+import  CustomCard from "../../common/customCard/CustomCard";
+import { SIZES } from '../../../constants/theme';
+
+export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
+export default function ExpenseItem(itemProps : ExpenseItemProps) {
+  const textColor = useThemeColor("primaryText");
+  const backgroundColor = useThemeColor("backgroundColor")
+  return (
+      <CustomCard>
+        <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
+        <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
+          <Text style={{
+            fontSize: SIZES.normal,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.category}</Text>
+          <Text style={{
+            fontSize: SIZES.large,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.title}</Text>
+          <Text style={{
+            fontSize: SIZES.small,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.date}</Text>
+        </View>
+        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
+          <Text style={{
+            fontSize: SIZES.xxLarge,
+            color: textColor
+          }} numberOfLines={1}>{itemProps.value}</Text>
+        </View>
+       
+      </CustomCard>
+     
+  )
+}
+
+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,
+  }
+})

components/index.jsx

@@ -0,0 +1,7 @@
+//home
+import ExpenseItem from "./home/expenseItem/expenseItem"
+
+export {
+  ExpenseItem
+}
+