{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-9",
  "type": "registry:component",
  "title": "Avatar 9",
  "description": "Avatar 9. Displays images, icons, or text in a circular or rounded shape.",
  "dependencies": [],
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "components/watermelon/avatar-9.tsx",
      "type": "registry:component",
      "content": "import {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\n\ntype Profile = {\n  name: string;\n  avatar: string;\n  status: string;\n};\n\nconst profile: Profile = {\n  name: 'Josh',\n  avatar: 'https://assets.watermelon.sh/wm_josh.png',\n  status: 'Available',\n};\n\nconst getInitials = (name: string) =>\n  name\n    .split(/\\s+/)\n    .map((word) => word.slice(0, 1))\n    .join('');\n\nconst Avatar9 = () => {\n  return (\n    <Avatar className=\"rounded-sm\">\n      <AvatarImage\n        src={profile.avatar}\n        alt={profile.name}\n        className=\"rounded-sm\"\n      />\n      <AvatarFallback className=\"text-xs\">\n        {getInitials(profile.name)}\n      </AvatarFallback>\n      <AvatarBadge className=\"top-0 right-0 bottom-auto translate-x-1/4 -translate-y-1/4 bg-amber-600 dark:bg-amber-400\">\n        <span className=\"sr-only\">{profile.status}</span>\n      </AvatarBadge>\n    </Avatar>\n  );\n};\n\nexport default Avatar9;\n"
    }
  ]
}