NeoScan_Physician/app/modules/Profile/components/ProfileHeader.tsx

50 lines
1.2 KiB
TypeScript

/*
* File: ProfileHeader.tsx
* Description: Component for displaying user avatar and name
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Colors, Spacing, Typography } from 'shared/src/theme';
interface ProfileHeaderProps {
user: { name: string; avatar?: string };
}
/**
* ProfileHeader - displays user avatar and name
*/
const ProfileHeader: React.FC<ProfileHeaderProps> = ({ user }) => (
<View style={styles.container}>
{user.avatar && <Image source={{ uri: user.avatar }} style={styles.avatar} />}
<Text style={styles.name}>{user.name}</Text>
</View>
);
const styles = StyleSheet.create({
container: {
alignItems: 'center',
marginBottom: Spacing.md,
},
avatar: {
width: 64,
height: 64,
borderRadius: 32,
marginBottom: Spacing.sm,
},
name: {
fontFamily: Typography.fontFamily.bold,
fontSize: Typography.fontSize.lg,
color: Colors.primary,
},
});
export default ProfileHeader;
/*
* End of File: ProfileHeader.tsx
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/