Profile Stats Card

1import React from 'react';
2import { StyleSheet, Text, View, Image, TouchableOpacity, Dimensions } from 'react-native';
3import { MaterialCommunityIcons } from '@expo/vector-icons';
4
5const { width } = Dimensions.get('window');
6
7const ProfileCard = ({
8    name = "Natasha Romanoff",
9    title = "Brand Designer",
10    location = "London",
11    bio = "I'm a brand designer who blends sharp strategy with bold creativity to craft identities that leave lasting impressions.",
12    projects = "50",
13    earnings = "$35k+",
14    rating = "4.5",
15    avatarUrl = "https://i.pravatar.cc/150?u=natasha", // Placeholder
16    onHirePress,
17    onMessagePress
18}) => {
19    return (
20        <View style={styles.cardContainer}>

import React from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import ProfileCard from './components/ProfileCard';

export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.centered}>
                <ProfileCard
                    onHirePress={() => console.log('Hire Pressed')}
                    onMessagePress={() => console.log('Message Pressed')}
                />
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,