React UI code by Mirado Andria

Avatar Group A

Group of avatar images.

Preview

Code

import styles from "./avatar-group-a.module.css";

type Props = {
  className?: string;
  children?: React.ReactNode;
  direction?: "to-right" | "to-left";
  avatarElements?: React.ReactNode[];
};

export default function AvatarGroupA({
  className,
  children,
  direction,
  avatarElements,
}: Props) {
  return (
    <div className={className}>
      <div className={styles["wrapper"]}>
        <div className={[,styles["avatars"], styles[`d-${direction}`]].join(" ")}>
          {avatarElements?.map((avatarElement, index) => {
            return (
              <div key={`avatar-${index}`} className={styles["avatar-item"]}>
                {avatarElement}
              </div>
            );
          })}
        </div>
        {children && <div className={styles["content"]}>{children}</div>}
      </div>
    </div>
  );
}

Design

Figma design file:

View in Figma

Documentation

Properties

Props of the component:

className (string): Specifies the CSS class of the component.
children (ReactNode): React children of the component. Specifies the ReactNode placed inside the component.
direction ("to-right" | "to-left"): Specifies the direction of placement order of avatar components.
avatarElements (Array of ReactNode such as the Avatar A component): Specifies the avatar components that will be grouped.