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

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

"use strict";

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useI18n } from '../hooks/useI18n';
import Avatar from './Avatar';
import { useOxy } from '../context/OxyContext';
import { useFileDownloadUrl } from '../hooks';
import { fontFamilies } from '../styles/fonts';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ProfileCard = ({
  user,
  theme,
  onEditPress,
  onClosePress,
  showCloseButton = false
}) => {
  const isDarkTheme = theme === 'dark';
  const {
    oxyServices
  } = useOxy();
  const {
    t
  } = useI18n();
  const textColor = isDarkTheme ? '#FFFFFF' : '#000000';
  const secondaryBackgroundColor = isDarkTheme ? '#222222' : '#FFFFFF';
  const primaryColor = '#0066CC';
  const avatarUrl = useFileDownloadUrl(user?.avatar, {
    variant: 'thumb'
  }).url || undefined;
  return /*#__PURE__*/_jsx(View, {
    style: styles.headerSection,
    children: /*#__PURE__*/_jsxs(View, {
      style: [styles.profileCard, styles.firstGroupedItem, styles.lastGroupedItem, {
        backgroundColor: secondaryBackgroundColor
      }],
      children: [/*#__PURE__*/_jsxs(View, {
        style: styles.userProfile,
        children: [/*#__PURE__*/_jsx(Avatar, {
          uri: user?.avatar ? avatarUrl : undefined,
          name: user?.name?.full || user?.username,
          size: 60,
          theme: theme
        }), /*#__PURE__*/_jsxs(View, {
          style: styles.userInfo,
          children: [/*#__PURE__*/_jsx(Text, {
            style: [styles.userName, {
              color: textColor
            }],
            children: user.username
          }), user.email && /*#__PURE__*/_jsx(Text, {
            style: [styles.userEmail, {
              color: isDarkTheme ? '#BBBBBB' : '#666666'
            }],
            children: user.email
          }), onEditPress && /*#__PURE__*/_jsx(TouchableOpacity, {
            style: styles.editProfileButton,
            onPress: onEditPress,
            children: /*#__PURE__*/_jsx(Text, {
              style: [styles.editProfileText, {
                color: primaryColor
              }],
              children: t('editProfile.title') || 'Edit Profile'
            })
          })]
        })]
      }), showCloseButton && onClosePress && /*#__PURE__*/_jsx(TouchableOpacity, {
        style: styles.closeButton,
        onPress: onClosePress,
        children: /*#__PURE__*/_jsx(Ionicons, {
          name: "close",
          size: 24,
          color: textColor
        })
      })]
    })
  });
};
const styles = 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: fontFamilies.phuduBold,
    marginBottom: 4
  },
  userEmail: {
    fontSize: 14,
    marginBottom: 8
  },
  editProfileButton: {
    alignSelf: 'flex-start'
  },
  editProfileText: {
    fontSize: 14,
    fontWeight: '600'
  },
  closeButton: {
    padding: 8
  }
});
export default ProfileCard;
//# sourceMappingURL=ProfileCard.js.map