coder/site/src/components/AvatarCard/AvatarCard.tsx

import { type CSSObject, useTheme } from "@emotion/react";
import type { FC, ReactNode } from "react";
import { Avatar } from "components/Avatar/Avatar";

type AvatarCardProps = {
  header: string;
  imgUrl: string;
  altText: string;
  background?: boolean;

  subtitle?: ReactNode;
  maxWidth?: number | "none";
};

export const AvatarCard: FC<AvatarCardProps> = ({
  header,
  imgUrl,
  altText,
  background,
  subtitle,
  maxWidth = "none",
}) => {
  const theme = useTheme();

  return (
    <div
      css={{
        maxWidth: maxWidth === "none" ? undefined : `${maxWidth}px`,
        display: "flex",
        flexFlow: "row nowrap",
        alignItems: "center",
        border: `1px solid ${theme.palette.divider}`,
        gap: "16px",
        padding: "16px",
        borderRadius: "8px",
        cursor: "default",
      }}
    >
      {/**
       * minWidth is necessary to ensure that the text truncation works properly
       * with flex containers that don't have fixed width
       *
       * @see {@link https://css-tricks.com/flexbox-truncated-text/}
       */}
      <div css={{ marginRight: "auto", minWidth: 0 }}>
        <h3
          // Lets users hover over truncated text to see whole thing
          title={header}
          css={[
            theme.typography.body1 as CSSObject,
            {
              lineHeight: 1.4,
              margin: 0,
              overflow: "hidden",
              whiteSpace: "nowrap",
              textOverflow: "ellipsis",
            },
          ]}
        >
          {header}
        </h3>

        {subtitle && (
          <div
            css={[
              theme.typography.body2 as CSSObject,
              { color: theme.palette.text.secondary },
            ]}
          >
            {subtitle}
          </div>
        )}
      </div>

      <Avatar background={background} src={imgUrl} alt={altText} size="md">
        {header}
      </Avatar>
    </div>
  );
};