UI Component Code Gallery for React - by Mirado Andria

Team member A

A component that represents a person such as an employee, team member, or contact.

Preview

Code

import styles from "./team-member-a.module.css";

type SocialType = {
  icon?: React.ReactElement;
  title?: string;
  href?: string;
  showTitle?: boolean;
};

type Props = {
  className?: string;
  imageSrc?: string;
  title: React.ReactNode;
  description?: React.ReactNode;
  href?: string;
  rounded?: "none" | "small" | "medium" | "large" | "full";
  variant?: "default" | "dark" | "card";
  footerSocials?: SocialType[];
};

export default function TeamMemberA({
  className,
  imageSrc,
  title,
  description,
  href,
  rounded = "small",
  variant,
  footerSocials,
}: Props) {
  return (
    <div
      className={[
        styles["wrapper"],
        styles[`r-${rounded}`],
        styles[`variant-${variant}`],
        className,
      ].join(" ")}
    >
      <div className={styles["image-wrapper"]}>
        {href ? (
          /* You may need to replace the a tag with a Link if you use Next.js  */
          <a href={href}>
            {/* If you use Next.js, replace 'img' with 'Image' element */}
            <img
              className={[styles["image"], styles["square"]].join(" ")}
              src={imageSrc}
              alt={title?.valueOf()?.toString()}
              width={360}
              height={360}
              loading="lazy"
            />
          </a>
        ) : (
          /* If you use Next.js, replace 'img' with 'Image' element */
          <img
            className={[styles["image"], styles["square"]].join(" ")}
            src={imageSrc}
            alt={title?.valueOf()?.toString()}
            width={360}
            height={360}
            loading="lazy"
          />
        )}
      </div>
      <div className={styles["body"]}>
        {/* You may need to replace the a tag with a Link if you use Next.js  */}
        <div className={styles["body-content"]}>
          <div className={styles["b-left"]}>
            <a href={href} className={styles["body-link"]}>
              <h3 className={styles["title"]}>{title}</h3>
              {description && (
                <div className={styles["desc"]}>
                  {typeof description === "string" ? (
                    <p>{description}</p>
                  ) : (
                    <>{description}</>
                  )}
                </div>
              )}
            </a>
          </div>
          <div className={styles["b-right"]}>
            {footerSocials && (
              <div className={styles["socials"]}>
                {footerSocials.map((social, index) => {
                  return (
                    <a
                      key={`social-${index}`}
                      className={styles["social-link"]}
                      title={social.title}
                      href={social.href}
                    >
                      {social.showTitle && (
                        <div className={styles["text"]}>{social.title}</div>
                      )}
                      <div className={styles["icon"]}>{social.icon}</div>
                    </a>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • imageSrc (string): Specifies the URL of the image.
  • title (string or ReactNode): Specifies the text or component that will be used as the title.
  • description (string or ReactNode): Specifies the text or component that will be used as the description.
  • href (string): Specifies the URL if the component is a link.
  • rounded ("none" | "small" | "medium" | "large" | "full"): Specifies the border radius of the image.
  • variant ("default" | "dark" | "card" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
  • footerSocials (array of SocialType): Specifies the social network links.
SocialType item arguments
  • icon (ReactNode): Specifies the action icon component.
  • title (string): Specifies the action title text.
  • href (string): Specifies the URL to the user profile.
  • showTitle (boolean): Show or hide title.
Sample CSS customization
.variant-card {
    --bg-color: white;
    --padding: 0.75rem;
    --body-margin-x: 0.5rem;
    --body-margin-y: 1rem;
    /* padding-bottom: calc(var(--body-margin-y) - var(--padding)); */
    padding-bottom: var(--body-margin-y);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
        0px 2px 4px -1px rgba(0, 0, 0, 0.2);
}