feat: add BalanceCard component

apps/native/app/(tabs)/home.tsx

@@ -1,41 +1,47 @@
 import React from "react";
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, View } from "react-native";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import BalanceCard from "@/components/ui/BalanceCard";
+import { WIDTH } from "../../utils/dimensions";
 
-import { ThemedView } from "@/components/ThemedView";
-import { ThemedStatusBar } from "@/components/ThemedStatusBar";
-import { ThemedSafeAreaView } from "@/components/ThemeSafeArea";
+const data = [
+  { value: "1000", label: "Tokens" },
+  { value: "2", label: "Wallets" },
+];
+
+const iconMapping = {
+  Tokens: <MaterialIcons name="toll" size={24} color="#2E7D32" />,
+  Wallets: (
+    <MaterialIcons name="account-balance-wallet" size={24} color="#1A237E" />
+  ),
+};
 
 export default function Home() {
   return (
-    <ThemedSafeAreaView style={styles.safeArea}>
-      <ThemedStatusBar />
-      <ThemedView style={[styles.container]}>
-        <Text style={[styles.commonText, styles.description]}>Home</Text>
-      </ThemedView>
-    </ThemedSafeAreaView>
+    <View style={styles.container}>
+      <View style={[styles.row, { gap: WIDTH * 0.05 }]}>
+        {data.map((item, index) => (
+          <BalanceCard
+            key={index}
+            value={item.value}
+            icon={iconMapping[item.label]}
+            label={item.label}
+          />
+        ))}
+      </View>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
   container: {
     flex: 1,
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: 32,
+    paddingHorizontal: 20,
     backgroundColor: "#f5f5f5",
   },
-  content: {
-    marginTop: 32,
-  },
-  commonText: {
-    textAlign: "center",
-    color: "#222629DE",
-  },
-  description: {
-    fontSize: 20,
+  row: {
+    flexDirection: "row",
+    justifyContent: "center",
+    flexWrap: "wrap",
   },
 });

apps/native/components/ui/BalanceCard.tsx

@@ -0,0 +1,63 @@
+import { View, Text, StyleSheet } from "react-native";
+import React from "react";
+
+import { WIDTH } from "../../utils/dimensions";
+
+interface BalanceCardProps {
+  icon: any;
+  label: string;
+  value: string;
+}
+
+export default function BalanceCard({ icon, label, value }: BalanceCardProps) {
+  return (
+    <View style={styles.card}>
+      <View style={styles.row}>
+        <View style={styles.iconContainer}>{icon}</View>
+        <Text style={styles.label}>{label}</Text>
+      </View>
+      <View style={styles.valueContainer}>
+        <Text style={styles.value}>{value}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    width: WIDTH / 2 - 30,
+    height: WIDTH / 2 - 80,
+    maxWidth: 400,
+    backgroundColor: "#fff",
+    paddingVertical: WIDTH * 0.02,
+    paddingHorizontal: WIDTH * 0.04,
+    borderRadius: 4,
+    alignSelf: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  row: {
+    flexDirection: "row",
+    gap: WIDTH * 0.02,
+    alignItems: "center",
+    justifyContent: "center",
+    margin: 10,
+  },
+  iconContainer: {
+    alignSelf: "flex-end",
+  },
+  label: {
+    fontSize: WIDTH * 0.04,
+  },
+  valueContainer: {
+    alignItems: "flex-end",
+    marginTop: 8,
+    flexDirection: "row",
+    width: "100%",
+  },
+  value: {
+    fontSize: 34,
+    textAlign: "right",
+    flex: 1,
+  },
+});