310 lines
8.3 KiB
TypeScript
310 lines
8.3 KiB
TypeScript
/*
|
|
* File: ProfileCard.tsx
|
|
* Description: Profile card component displaying user information
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
|
|
import { theme } from '../../../theme/theme';
|
|
import { UserProfile } from '../../../shared/types';
|
|
|
|
/**
|
|
* ProfileCardProps Interface
|
|
*
|
|
* Purpose: Defines the props required by the ProfileCard component
|
|
*
|
|
* Props:
|
|
* - profile: User profile data to display
|
|
* - onPress: Callback function when card is pressed
|
|
*/
|
|
interface ProfileCardProps {
|
|
profile: UserProfile;
|
|
onPress: () => void;
|
|
}
|
|
|
|
/**
|
|
* ProfileCard Component
|
|
*
|
|
* Purpose: Displays user profile information in a card format
|
|
*
|
|
* Features:
|
|
* - Profile picture display
|
|
* - User name and credentials
|
|
* - Department and role information
|
|
* - Contact information
|
|
* - Interactive card design
|
|
*/
|
|
export const ProfileCard: React.FC<ProfileCardProps> = ({ profile, onPress }) => {
|
|
/**
|
|
* formatCredentials Function
|
|
*
|
|
* Purpose: Format credentials array into a readable string
|
|
*
|
|
* @returns Formatted credentials string
|
|
*/
|
|
const formatCredentials = (): string => {
|
|
return profile.credentials.join(', ');
|
|
};
|
|
|
|
/**
|
|
* formatSpecialties Function
|
|
*
|
|
* Purpose: Format specialties array into a readable string
|
|
*
|
|
* @returns Formatted specialties string
|
|
*/
|
|
const formatSpecialties = (): string => {
|
|
return profile.specialties.slice(0, 2).join(', ');
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.7}>
|
|
{/* Profile picture and basic info */}
|
|
<View style={styles.header}>
|
|
<View style={styles.imageContainer}>
|
|
{profile.profilePicture ? (
|
|
<Image
|
|
source={require('../../../assets/images/default-avatar.png')}
|
|
style={styles.profileImage}
|
|
resizeMode="cover"
|
|
onError={(error) => {
|
|
console.log('Profile image loading error:', error.nativeEvent.error);
|
|
}}
|
|
/>
|
|
) : (
|
|
<View style={styles.fallbackAvatar}>
|
|
<Text style={styles.fallbackText}>
|
|
{profile.firstName.charAt(0)}{profile.lastName.charAt(0)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.basicInfo}>
|
|
<Text style={styles.name}>
|
|
{profile.firstName} {profile.lastName}
|
|
</Text>
|
|
<Text style={styles.credentials}>{formatCredentials()}</Text>
|
|
<Text style={styles.specialties}>{formatSpecialties()}</Text>
|
|
</View>
|
|
|
|
<View style={styles.editIcon}>
|
|
<Text style={styles.editText}>Edit</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Department and role information */}
|
|
<View style={styles.infoSection}>
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Department:</Text>
|
|
<Text style={styles.infoValue}>{profile.department}</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Role:</Text>
|
|
<Text style={styles.infoValue}>
|
|
{profile.role.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.infoRow}>
|
|
<Text style={styles.infoLabel}>Experience:</Text>
|
|
<Text style={styles.infoValue}>{profile.yearsOfExperience} years</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Contact information */}
|
|
<View style={styles.contactSection}>
|
|
<View style={styles.contactRow}>
|
|
<Text style={styles.contactLabel}>Email:</Text>
|
|
<Text style={styles.contactValue} numberOfLines={1}>
|
|
{profile.email}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.contactRow}>
|
|
<Text style={styles.contactLabel}>Phone:</Text>
|
|
<Text style={styles.contactValue}>{profile.phoneNumber}</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
// ============================================================================
|
|
// STYLES SECTION
|
|
// ============================================================================
|
|
|
|
const styles = StyleSheet.create({
|
|
// Main container for the profile card
|
|
container: {
|
|
backgroundColor: theme.colors.background,
|
|
borderRadius: theme.borderRadius.large,
|
|
padding: theme.spacing.lg,
|
|
marginVertical: theme.spacing.md,
|
|
shadowColor: '#000000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
borderColor: theme.colors.border,
|
|
borderWidth: 1,
|
|
},
|
|
|
|
// Header section with profile picture and basic info
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.md,
|
|
},
|
|
|
|
// Profile image container
|
|
imageContainer: {
|
|
marginRight: theme.spacing.md,
|
|
},
|
|
|
|
// Profile image styling
|
|
profileImage: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
backgroundColor: theme.colors.backgroundAlt,
|
|
borderWidth: 2,
|
|
borderColor: theme.colors.border,
|
|
},
|
|
|
|
// Basic information section
|
|
basicInfo: {
|
|
flex: 1,
|
|
},
|
|
|
|
// User name styling
|
|
name: {
|
|
fontSize: theme.typography.fontSize.displaySmall,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.textPrimary,
|
|
marginBottom: theme.spacing.xs,
|
|
},
|
|
|
|
// Credentials styling
|
|
credentials: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.primary,
|
|
marginBottom: theme.spacing.xs,
|
|
},
|
|
|
|
// Specialties styling
|
|
specialties: {
|
|
fontSize: theme.typography.fontSize.bodySmall,
|
|
color: theme.colors.textSecondary,
|
|
},
|
|
|
|
// Edit icon/text styling
|
|
editIcon: {
|
|
paddingHorizontal: theme.spacing.sm,
|
|
paddingVertical: theme.spacing.xs,
|
|
backgroundColor: theme.colors.primary,
|
|
borderRadius: theme.borderRadius.small,
|
|
},
|
|
|
|
// Edit text styling
|
|
editText: {
|
|
fontSize: theme.typography.fontSize.bodySmall,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.background,
|
|
},
|
|
|
|
// Information section styling
|
|
infoSection: {
|
|
marginBottom: theme.spacing.md,
|
|
paddingTop: theme.spacing.md,
|
|
borderTopColor: theme.colors.border,
|
|
borderTopWidth: 1,
|
|
},
|
|
|
|
// Information row styling
|
|
infoRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
|
|
// Information label styling
|
|
infoLabel: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.textSecondary,
|
|
},
|
|
|
|
// Information value styling
|
|
infoValue: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.textPrimary,
|
|
textAlign: 'right',
|
|
flex: 1,
|
|
},
|
|
|
|
// Contact section styling
|
|
contactSection: {
|
|
paddingTop: theme.spacing.md,
|
|
borderTopColor: theme.colors.border,
|
|
borderTopWidth: 1,
|
|
},
|
|
|
|
// Contact row styling
|
|
contactRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: theme.spacing.sm,
|
|
},
|
|
|
|
// Contact label styling
|
|
contactLabel: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.textSecondary,
|
|
},
|
|
|
|
// Contact value styling
|
|
contactValue: {
|
|
fontSize: theme.typography.fontSize.bodyMedium,
|
|
fontFamily: theme.typography.fontFamily.medium,
|
|
color: theme.colors.textPrimary,
|
|
textAlign: 'right',
|
|
flex: 1,
|
|
},
|
|
|
|
// Fallback avatar styling
|
|
fallbackAvatar: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
backgroundColor: theme.colors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 2,
|
|
borderColor: theme.colors.border,
|
|
},
|
|
|
|
// Fallback text styling
|
|
fallbackText: {
|
|
fontSize: theme.typography.fontSize.displaySmall,
|
|
fontFamily: theme.typography.fontFamily.bold,
|
|
color: theme.colors.background,
|
|
textAlign: 'center',
|
|
},
|
|
});
|
|
|
|
/*
|
|
* End of File: ProfileCard.tsx
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|