import * as AvatarPrimitive from "@radix-ui/react-avatar"; import * as Tooltip from "@radix-ui/react-tooltip"; import Link from "next/link"; import classNames from "@calcom/lib/classNames"; import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage"; import type { Maybe } from "@trpc/server"; import { FiCheck } from "../icon"; export type AvatarProps = { className?: string; size: "xs" | "sm" | "md" | "mdLg" | "lg" | "xl"; imageSrc?: Maybe; title?: string; alt: string; href?: string; gravatarFallbackMd5?: string; fallback?: React.ReactNode; accepted?: boolean; asChild?: boolean; // Added to ignore the outer span on the fallback component - messes up styling }; const sizesPropsBySize = { xs: "w-4 h-4", // 16px sm: "w-6 h-6", // 24px md: "w-8 h-8", // 32px mdLg: "w-10 h-10", //40px lg: "w-16 h-16", // 64px xl: "w-24 h-24", // 96px } as const; export function Avatar(props: AvatarProps) { const { imageSrc, gravatarFallbackMd5, size, alt, title, href } = props; const rootClass = classNames("aspect-square rounded-full", sizesPropsBySize[size]); let avatar = ( <> <> {props.fallback && !gravatarFallbackMd5 && props.fallback} {gravatarFallbackMd5 && ( {alt} )} {props.accepted && (
{size === "lg" && }
)}
); if (href) { avatar = {avatar}; } return title ? ( {avatar} {title} ) : ( <>{avatar} ); }