eventx-design-system/dist/components/Avatar.js

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import styled, { css } from 'styled-components';
import { colors, typography, borderRadius, transitions } from '../tokens/design-tokens';
// Estilos base do avatar
const baseAvatarStyles = css `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: ${borderRadius.full};
  background-color: ${colors.brand.primary[100]};
  color: ${colors.brand.primary[800]};
  font-family: ${typography.fontFamily.primary};
  font-weight: ${typography.fontWeight.semibold};
  overflow: hidden;
  transition: all ${transitions.duration[200]} ${transitions.easing.inOut};
  border: 2px solid ${colors.neutral[200]};
`;
// Tamanhos do avatar
const sizeStyles = {
    sm: css `
    width: 32px;
    height: 32px;
    font-size: ${typography.fontSize.xs};
    line-height: ${typography.lineHeight.tight};
  `,
    md: css `
    width: 40px;
    height: 40px;
    font-size: ${typography.fontSize.sm};
    line-height: ${typography.lineHeight.normal};
  `,
    lg: css `
    width: 48px;
    height: 48px;
    font-size: ${typography.fontSize.base};
    line-height: ${typography.lineHeight.relaxed};
  `,
    xl: css `
    width: 64px;
    height: 64px;
    font-size: ${typography.fontSize.lg};
    line-height: ${typography.lineHeight.loose};
  `,
};
const StyledAvatar = styled.div `
  ${baseAvatarStyles}
  ${({ size = 'md' }) => sizeStyles[size]}
`;
const AvatarImage = styled.img `
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
`;
const AvatarFallback = styled.div `
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
`;
export const Avatar = ({ size = 'md', src, alt, children, className, fallback, ...props }) => {
    const getInitials = (name) => {
        return name
            .split(' ')
            .map(word => word.charAt(0))
            .join('')
            .toUpperCase()
            .slice(0, 2);
    };
    const renderContent = () => {
        if (src) {
            return _jsx(AvatarImage, { src: src, alt: alt || 'Avatar' });
        }
        if (children) {
            return _jsx(AvatarFallback, { children: children });
        }
        if (fallback) {
            return _jsx(AvatarFallback, { children: getInitials(fallback) });
        }
        return _jsx(AvatarFallback, { children: "?" });
    };
    return (_jsx(StyledAvatar, { size: size, className: className, ...props, children: renderContent() }));
};