Avatar

import { Avatar } from "@/ui/Avatar";

<Avatar.Root size="lg">
  <Avatar.Image src="https://i.pravatar.cc/120" alt="Profile" />
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>

function AvatarRoot({ children }: { children: React.ReactNode }) {
  return <span className="inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-slate-100">{children}</span>;
}

type AvatarCompound = typeof AvatarRoot & { Root: typeof AvatarRoot };
export const Avatar = Object.assign(AvatarRoot, { Root: AvatarRoot }) as AvatarCompound;