@oxyhq/services/lib/commonjs/ui/components/ProfileCard.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _useI18n = require("../hooks/useI18n");
var _Avatar = _interopRequireDefault(require("./Avatar"));
var _OxyContext = require("../context/OxyContext");
var _hooks = require("../hooks");
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 {
    oxyServices
  } = (0, _OxyContext.useOxy)();
  const {
    t
  } = (0, _useI18n.useI18n)();
  const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
  const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
  const primaryColor = '#0066CC';
  const avatarUrl = (0, _hooks.useFileDownloadUrl)(user?.avatar, {
    variant: 'thumb'
  }).url || undefined;
  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 ? avatarUrl : undefined,
          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: t('editProfile.title') || '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