Avatar

ui/avatar.tsx

"use client";

import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import type * as React from "react";
import { cn } from "@/lib/utils";

const Avatar = ({
  className,
  size = "default",
  ...props
}: AvatarPrimitive.Root.Props & {
  size?: "default" | "sm" | "lg";
}) => (
  <AvatarPrimitive.Root
    className={cn(
      "group/avatar relative flex size-8 shrink-0 select-none rounded-full after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
      className,
    )}
    data-size={size}
    data-slot="avatar"
    {...props}
  />
);

const AvatarImage = ({ className, ...props }: AvatarPrimitive.Image.Props) => (
  <AvatarPrimitive.Image
    className={cn(
      "absolute inset-0 z-10 aspect-square size-full rounded-full object-cover transition-opacity data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
      className,
    )}
    data-slot="avatar-image"
    {...props}
  />
);

const AvatarFallback = ({ className, ...props }: AvatarPrimitive.Fallback.Props) => (
  <AvatarPrimitive.Fallback
    className={cn(
      "absolute inset-0 flex size-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm transition-opacity data-[ending-style]:opacity-0 group-data-[size=sm]/avatar:text-xs",
      className,
    )}
    data-slot="avatar-fallback"
    {...props}
  />
);

const AvatarBadge = ({ className, ...props }: React.ComponentProps<"span">) => (
  <span
    className={cn(
      "absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
      "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
      "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
      "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
      className,
    )}
    data-slot="avatar-badge"
    {...props}
  />
);

const AvatarGroup = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    className={cn(
      "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
      className,
    )}
    data-slot="avatar-group"
    {...props}
  />
);

const AvatarGroupCount = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    className={cn(
      "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
      className,
    )}
    data-slot="avatar-group-count"
    {...props}
  />
);

export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };