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

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

"use strict";

import React from 'react';
import { View, Text, Image, StyleSheet, ActivityIndicator, Platform } from 'react-native';
import { useThemeColors } from '../styles';
import { fontFamilies } from '../styles/fonts';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Avatar component that displays either an image or text avatar
 * Falls back to displaying the first letter of the name if no image is provided
 */
const Avatar = ({
  uri,
  text,
  name,
  size = 40,
  theme = 'light',
  backgroundColor,
  textColor = '#FFFFFF',
  style,
  imageStyle,
  textStyle,
  isLoading = false
}) => {
  // Get theme colors
  const colors = useThemeColors(theme);

  // Use the primary color from theme as default background if not specified
  const bgColor = backgroundColor || colors.primary;

  // Calculate font size based on avatar size
  const fontSize = Math.floor(size * 0.4);

  // Determine what text to display for fallback
  const displayText = text || (name ? name.charAt(0).toUpperCase() : '');

  // Style for container based on size
  const containerStyle = {
    width: size,
    height: size,
    borderRadius: size / 2 // Make it circular
  };
  if (isLoading) {
    return /*#__PURE__*/_jsx(View, {
      style: [styles.container, containerStyle, {
        backgroundColor: colors.inputBackground
      }, style],
      children: /*#__PURE__*/_jsx(ActivityIndicator, {
        color: colors.primary,
        size: size > 50 ? 'large' : 'small'
      })
    });
  }

  // If an image URL is provided, use Image component
  if (uri) {
    return /*#__PURE__*/_jsx(Image, {
      source: {
        uri: uri
      },
      style: [styles.container, containerStyle, imageStyle]
    });
  }

  // Otherwise show text avatar
  return /*#__PURE__*/_jsx(View, {
    style: [styles.container, containerStyle, {
      backgroundColor: bgColor
    }, style],
    children: /*#__PURE__*/_jsx(Text, {
      style: [styles.text, {
        fontSize,
        fontFamily: fontFamilies.phuduBold
      }, {
        color: textColor
      }, textStyle],
      children: displayText
    })
  });
};
const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    // Font family is applied directly in the component to use the constants
    fontWeight: Platform.OS === 'web' ? 'bold' : undefined // Only apply fontWeight on web
  }
});
export default Avatar;
//# sourceMappingURL=Avatar.js.map