@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
124 lines (123 loc) • 3.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _Avatar = _interopRequireDefault(require("./Avatar"));
var _fonts = require("../styles/fonts");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ProfileCard = ({
user,
theme,
onEditPress,
onClosePress,
showCloseButton = false
}) => {
const isDarkTheme = theme === 'dark';
const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
const primaryColor = '#0066CC';
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.headerSection,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.profileCard, styles.firstGroupedItem, styles.lastGroupedItem, {
backgroundColor: secondaryBackgroundColor
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.userProfile,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
uri: user?.avatar?.url,
name: user?.name?.full || user?.username,
size: 60,
theme: theme
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.userInfo,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.userName, {
color: textColor
}],
children: user.username
}), user.email && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.userEmail, {
color: isDarkTheme ? '#BBBBBB' : '#666666'
}],
children: user.email
}), onEditPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.editProfileButton,
onPress: onEditPress,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.editProfileText, {
color: primaryColor
}],
children: "Edit Profile"
})
})]
})]
}), showCloseButton && onClosePress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.closeButton,
onPress: onClosePress,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "close",
size: 24,
color: textColor
})
})]
})
});
};
const styles = _reactNative.StyleSheet.create({
headerSection: {
padding: 16,
paddingTop: 20
},
profileCard: {
padding: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
firstGroupedItem: {
borderTopLeftRadius: 24,
borderTopRightRadius: 24
},
lastGroupedItem: {
borderBottomLeftRadius: 24,
borderBottomRightRadius: 24,
marginBottom: 8
},
userProfile: {
flexDirection: 'row',
alignItems: 'center',
flex: 1
},
userInfo: {
marginLeft: 16,
flex: 1
},
userName: {
fontSize: 22,
fontWeight: 'bold',
fontFamily: _fonts.fontFamilies.phuduBold,
marginBottom: 4
},
userEmail: {
fontSize: 14,
marginBottom: 8
},
editProfileButton: {
alignSelf: 'flex-start'
},
editProfileText: {
fontSize: 14,
fontWeight: '600'
},
closeButton: {
padding: 8
}
});
var _default = exports.default = ProfileCard;
//# sourceMappingURL=ProfileCard.js.map