A circular user portrait that shows a profile image and automatically falls back to initials text when the image is missing or fails to load.
"use client";
import { Avatar } from "@/components/ui/avatar";
/** The circle reads its own state: the fallback names what it waits for. */
const PORTRAIT =
"data:image/svg+xml;utf8," +
encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" width="144" height="144"><rect width="144" height="144" fill="#b9b2a4" /><circle cx="72" cy="56" r="26" fill="#3a3733" /><path d="M24 132c6-30 26-44 48-44s42 14 48 44" fill="#3a3733" /></svg>`,
);
export default function AvatarContextDemo() {
return (
<Avatar.Root>
<Avatar.Context>
{(api: { loaded: boolean }) => (
<Avatar.Fallback>{api.loaded ? "S" : "…"}</Avatar.Fallback>
)}
</Avatar.Context>
<Avatar.Image src={PORTRAIT} alt="Portrait of Sage" />
</Avatar.Root>
);
}
