Avatar Group

import { Avatar as BlobzAvatarImage, type AvatarProps as BlobzAvatarImageProps } from "@blobz/react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "cn";
import { BlobAvatarGroup, BlobAvatarGroupCount, BlobAvatarGroupItem } from "@/components/ui/avatar-group";

export const DEMO_PEOPLE = {
  gagandeepKang: "Gagandeep Kang",
  janakiAmmal: "Janaki Ammal",
  kalpanaChawla: "Kalpana Chawla",
  rajReddy: "Raj Reddy",
  srinivasaRamanujan: "Srinivasa Ramanujan",
  vikramSarabhai: "Vikram Sarabhai",
} as const;

const WHITESPACE_PATTERN = /\s+/;

export const getFirstName = (name: string): string =>
  name.trim().split(WHITESPACE_PATTERN)[0] ?? name;

const blobAvatarVariants = cva(
	"relative inline-flex shrink-0 overflow-hidden align-middle ring-1 ring-foreground/5",
	{
		defaultVariants: {
			frame: "rounded",
			size: "default",
			variant: "default",
		},
		variants: {
			frame: {
				circle: "rounded-full",
				rounded: "rounded-lg",
				square: "rounded-none",
			},
			size: {
				default: "size-10",
				lg: "size-12",
				sm: "size-8",
				xl: "size-16",
			},
			variant: {
				default: "bg-muted",
				elevated: "bg-muted shadow-md ring-1 ring-border/80",
				outline: "bg-background ring-1 ring-border",
			},
		},
	}
);

export interface BlobAvatarProps
	extends Omit<BlobzAvatarImageProps, "className" | "frame" | "size">,
		VariantProps<typeof blobAvatarVariants> {
	readonly className?: string;
	readonly imageClassName?: string;
}

export function BlobAvatar({
	className,
	frame = "rounded",
	imageClassName,
	size = "default",
	variant = "default",
	...imageProps
}: BlobAvatarProps) {
	return (
		<span
			className={cn(blobAvatarVariants({ frame, size, variant }), className)}
			data-frame={frame}
			data-size={size}
			data-slot="blob-avatar"
			data-variant={variant}
		>
			<BlobzAvatarImage
				{...imageProps}
				className={cn("block size-full object-cover", imageClassName)}
				frame={frame ?? "rounded"}
				size="100%"
			/>
		</span>
	);
}

export { blobAvatarVariants };

const TEAM = [
	{ id: "janaki", name: getFirstName(DEMO_PEOPLE.janakiAmmal) },
	{ id: "vikram", name: getFirstName(DEMO_PEOPLE.vikramSarabhai) },
	{ id: "kalpana", name: getFirstName(DEMO_PEOPLE.kalpanaChawla) },
] as const;

const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;

export function AvatarGroupExample() {
	return (
		<BlobAvatarGroup aria-label="Project team">
			{TEAM.map((member) => (
				<BlobAvatarGroupItem key={member.id}>
					<BlobAvatar alt="" name={member.name} palette={BLUE_PALETTE} />
				</BlobAvatarGroupItem>
			))}
			<BlobAvatarGroupCount count={4} />
		</BlobAvatarGroup>
	);
}

export default AvatarGroupExample;