@vertisanpro/flowbite-react/lib/src/components/Avatar/Avatar.js

Non-Official React components built for Flowbite and Tailwind CSS

import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
import { AvatarGroup } from './AvatarGroup';
import { AvatarGroupCounter } from './AvatarGroupCounter';
const AvatarComponent = ({ alt = '', bordered = false, children, className, color = 'light', img, placeholderInitials = '', rounded = false, size = 'md', stacked = false, status, statusPosition = 'top-left', theme: customTheme = {}, ...props }) => {
    const theme = mergeDeep(getTheme().avatar, customTheme);
    const imgClassName = twMerge(theme.root.img.base, bordered && theme.root.bordered, bordered && theme.root.color[color], rounded && theme.root.rounded, stacked && theme.root.stacked, theme.root.img.on, theme.root.size[size]);
    const imgProps = {
        className: twMerge(imgClassName, theme.root.img.on),
        'data-testid': 'flowbite-avatar-img',
    };
    return (React.createElement("div", { className: twMerge(theme.root.base, className), "data-testid": "flowbite-avatar", ...props },
        React.createElement("div", { className: "relative" },
            img ? (typeof img === 'string' ? (React.createElement("img", { alt: alt, src: img, ...imgProps })) : (img({ alt, ...imgProps }))) : placeholderInitials ? (React.createElement("div", { className: twMerge(theme.root.img.off, theme.root.initials.base, stacked && theme.root.stacked, bordered && theme.root.bordered, bordered && theme.root.color[color], theme.root.size[size], rounded && theme.root.rounded), "data-testid": "flowbite-avatar-initials-placeholder" },
                React.createElement("span", { className: twMerge(theme.root.initials.text), "data-testid": "flowbite-avatar-initials-placeholder-text" }, placeholderInitials))) : (React.createElement("div", { className: twMerge(imgClassName, theme.root.img.off), "data-testid": "flowbite-avatar-img" },
                React.createElement("svg", { className: theme.root.img.placeholder, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" },
                    React.createElement("path", { fillRule: "evenodd", d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z", clipRule: "evenodd" })))),
            status && (React.createElement("span", { "data-testid": "flowbite-avatar-status", className: twMerge(theme.root.status.base, theme.root.status[status], theme.root.statusPosition[statusPosition]) }))),
        children && React.createElement("div", null, children)));
};
AvatarComponent.displayName = 'Avatar';
export const Avatar = Object.assign(AvatarComponent, {
    Group: AvatarGroup,
    Counter: AvatarGroupCounter,
});