{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-list-item",
  "type": "registry:component",
  "title": "Lens Account List Item",
  "description": "A list item for a Lens account displaying the avatar, name, and handle.",
  "dependencies": ["@lens-protocol/react@0.0.0-canary-20250820102520", "lucide-react"],
  "registryDependencies": ["avatar", "button", "skeleton", "https://lensblocks.com/r/utils.json"],
  "files": [
    {
      "path": "registry/new-york/components/account/lens-account-list-item.tsx",
      "content": "\"use client\";\n\nimport { Account, AuthenticatedUser } from \"@lens-protocol/react\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/new-york/ui/avatar\";\nimport { CheckCircle2Icon, ChevronRight, Loader, UserCircle2 } from \"lucide-react\";\nimport { truncateAddress } from \"@/registry/new-york/lib/lens-utils\";\nimport { ReactNode } from \"react\";\nimport { isResult, Result } from \"@/registry/new-york/lib/result\";\nimport { LensAccountListItemSkeleton } from \"@/registry/new-york/components/account/lens-account-list-item-skeleton\";\n\ntype LensAccountListItemProps = {\n  account: Account | Result<Account>;\n  selectedAccount?: Account | null;\n  onAccountSelected?: (account: Account) => void;\n  authenticatedUser?: AuthenticatedUser | null;\n  showChevron?: boolean;\n  renderDivider?: () => ReactNode;\n};\n\nexport const LensAccountListItem = ({\n  account: accountRes,\n  selectedAccount,\n  onAccountSelected,\n  authenticatedUser,\n  showChevron = true,\n  renderDivider,\n}: LensAccountListItemProps) => {\n  const isAccountResult = isResult(accountRes);\n  const account = isAccountResult ? accountRes.data : accountRes;\n\n  const isAuthenticated =\n    authenticatedUser && authenticatedUser?.address.toLowerCase() === account?.address.toLowerCase();\n  const isSelected = (onAccountSelected && isAuthenticated) ?? false;\n\n  const Divider = renderDivider;\n\n  if (isAccountResult && accountRes.error) {\n    return null; // show error state\n  }\n\n  if (!account || (isAccountResult && accountRes.loading)) {\n    return (\n      <div className=\"w-full flex items-center text-start\">\n        <LensAccountListItemSkeleton showChevron={showChevron} />\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <button\n        type=\"button\"\n        disabled={selectedAccount?.address !== undefined || isSelected}\n        onClick={() => onAccountSelected?.(account)}\n        className={`w-full flex items-center text-start p-2 gap-2 enabled:cursor-pointer enabled:hover:bg-neutral-100 enabled:focus:bg-neutral-100 focus:outline-0 rounded-sm ${isSelected ? \"border\" : \"disabled:opacity-45\"}`}\n      >\n        <Avatar className=\"flex-none w-10 h-10\">\n          <AvatarImage src={account.metadata?.picture} alt=\"Account avatar\" />\n          <AvatarFallback>\n            <UserCircle2 className=\"w-10 h-10 opacity-45\" />\n          </AvatarFallback>\n        </Avatar>\n        <div className=\"flex-grow flex flex-col w-full min-w-0\">\n          <div className=\"flex gap-1 items-center\">\n            <span className=\"text-sm font-semibold\">\n              {account.metadata?.name ?? account.username?.localName ?? \"[anonymous]\"}\n            </span>\n          </div>\n          <span className=\"text-xs opacity-65 truncate\">\n            {account.metadata?.name ? \"@\" + account.username?.localName : truncateAddress(account.address)}\n          </span>\n        </div>\n        {selectedAccount?.address == account.address ? (\n          <Loader className=\"animate-spin flex-none opacity-45 w-4 h-4\" />\n        ) : showChevron && isSelected ? (\n          <CheckCircle2Icon className=\"flex-none opacity-45 w-4 h-4 text-accent-foreground\" />\n        ) : (\n          showChevron && <ChevronRight className=\"flex-none opacity-45 w-4 h-4\" />\n        )}\n      </button>\n      {Divider && <Divider />}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york/components/account/lens-account-list-item-skeleton.tsx",
      "content": "import { Skeleton } from \"@/registry/new-york/ui/skeleton\";\n\nexport const LensAccountListItemSkeleton = ({ showChevron = true }: { showChevron?: boolean }) => {\n  return (\n    <div className=\"w-full flex items-center space-x-2 p-2\">\n      <Skeleton className=\"h-10 w-10 rounded-full flex-none\" />\n      <div className=\"flex-grow space-y-1.5\">\n        <Skeleton className=\"h-4 w-9/12\" />\n        <Skeleton className=\"h-3 w-5/12\" />\n      </div>\n      {showChevron && <Skeleton className=\"w-4 h-4\" />}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ]
}