{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-with-status-indicator",
  "type": "registry:component",
  "title": "Avatar",
  "author": "Toby Belhome",
  "description": "An image element with fallbacks for representing the user.",
  "dependencies": [],
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "examples/components/avatar/with-status-indicator/page.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function AvatarWithStatusIcon() {\n  return (\n    <div className=\"flex gap-2\">\n      <div className=\"relative\">\n        <Avatar>\n          <AvatarImage src=\"https://www.tobybelhome.com/user.png\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <div className=\"border-background absolute -end-0.5 -top-0.5 size-3 rounded-full border-2 bg-green-500\">\n          <span className=\"sr-only\">Online</span>\n        </div>\n      </div>\n\n      <div className=\"relative\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <div className=\"border-background absolute -end-0.5 -bottom-0.5 size-3 rounded-full border-2 bg-red-500\">\n          <span className=\"sr-only\">Offline</span>\n        </div>\n      </div>\n\n      <div className=\"relative\">\n        <Avatar>\n          <AvatarImage src=\"https://images.unsplash.com/photo-1654110455429-cf322b40a906?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=300\" />\n          <AvatarFallback>TB</AvatarFallback>\n        </Avatar>\n        <div className=\"border-background absolute -end-0.5 -top-0.5 size-3 rounded-full border-2 bg-orange-400\">\n          <span className=\"sr-only\">Offline</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/avatar-with-status-indicator.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}