{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-info",
  "type": "registry:block",
  "title": "User Info",
  "description": "A component for displaying user information.",
  "registryDependencies": [
    "profile-picture",
    "username-display",
    "timestamp"
  ],
  "files": [
    {
      "path": "src/components/deso/user-info.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { ProfilePicture } from './profile-picture';\nimport { UsernameDisplay } from './username-display';\nimport { useProfile } from '@/hooks/useProfile';\nimport { cn } from '@/lib/utils/deso';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { UserPublicKey } from './user-public-key';\nimport { Profile } from '@/lib/schemas/deso';\n\nexport interface UserInfoProps {\n  publicKey: string;\n  profile?: Profile;\n  pictureSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  showVerification?: boolean;\n  showCopyButton?: boolean;\n  truncate?: boolean;\n  maxLength?: number;\n  className?: string;\n  usernameClassName?: string;\n  layout?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  gap?: 'none' | 'sm' | 'md' | 'lg';\n  showPublicKey?: boolean;\n  isVerified?: boolean;\n  usernameVariant?: 'social' | 'token';\n  children?: React.ReactNode;\n}\n\nexport function UserInfo({\n  publicKey,\n  profile: profileProp,\n  pictureSize = 'md',\n  showVerification = true,\n  isVerified: isVerifiedProp = false,\n  showCopyButton = false,\n  truncate = false,\n  maxLength,\n  className,\n  usernameClassName,\n  layout = 'row',\n  gap = 'md',\n  showPublicKey = false,\n  usernameVariant = 'social',\n  children,\n}: UserInfoProps) {\n  const {\n    profile: fetchedProfile,\n    loading,\n    error,\n  } = useProfile(profileProp ? '' : publicKey);\n  const profile = profileProp || fetchedProfile;\n  const username = profile?.username;\n  const isLoading = !profileProp && loading;\n  const hasError = !profileProp && error;\n  const isVerified = profileProp?.isVerified || isVerifiedProp;\n\n  const gapClasses = {\n    none: '',\n    sm: layout === 'row' ? 'gap-1' : 'gap-0.5',\n    md: layout === 'row' ? 'gap-2' : 'gap-1',\n    lg: layout === 'row' ? 'gap-3' : 'gap-1.5',\n  };\n\n  const containerClasses = cn(\n    'flex items-center',\n    layout === 'column' && 'flex-col',\n    layout === 'row-reverse' && 'flex-row-reverse',\n    layout === 'column-reverse' && 'flex-col-reverse',\n    gapClasses[gap],\n    className\n  );\n\n  const textContainerClasses = cn(\n    layout === 'column' && 'flex flex-col items-center text-center',\n    layout === 'row' && 'flex flex-col justify-center',\n    layout === 'row-reverse' && 'flex flex-col justify-end items-end',\n    layout === 'column-reverse' && 'flex flex-col justify-end items-end'\n  );\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className={containerClasses}>\n        <Skeleton\n          className={`rounded-full ${\n            pictureSize === 'xs'\n              ? 'w-6 h-6'\n              : pictureSize === 'sm'\n              ? 'w-8 h-8'\n              : pictureSize === 'lg'\n              ? 'w-12 h-12'\n              : pictureSize === 'xl'\n              ? 'w-16 h-16'\n              : 'w-10 h-10'\n          }`}\n        />\n        <div className={textContainerClasses}>\n          <Skeleton className=\"h-4 w-20 mb-1\" />\n          {showPublicKey && <Skeleton className=\"h-3 w-24\" />}\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (hasError) {\n    return (\n      <div className={containerClasses}>\n        <div\n          className={`bg-gray-200 rounded-full flex items-center justify-center ${\n            pictureSize === 'xs'\n              ? 'w-6 h-6'\n              : pictureSize === 'sm'\n              ? 'w-8 h-8'\n              : pictureSize === 'lg'\n              ? 'w-12 h-12'\n              : pictureSize === 'xl'\n              ? 'w-16 h-16'\n              : 'w-10 h-10'\n          }`}\n        >\n          <span className=\"text-gray-400\">?</span>\n        </div>\n        <div className={textContainerClasses}>\n          <div className=\"text-xs text-gray-400\">@{username || 'error'}</div>\n          {showPublicKey && <UserPublicKey publicKey={publicKey} truncate />}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerClasses}>\n      <ProfilePicture\n        publicKey={publicKey}\n        size={pictureSize}\n        profile={profile}\n      />\n      <div className={textContainerClasses}>\n        <UsernameDisplay\n          publicKey={publicKey}\n          profile={profile}\n          showVerification={showVerification}\n          isVerified={isVerified}\n          showCopyButton={showCopyButton}\n          truncate={truncate}\n          maxLength={maxLength}\n          className={cn('text-sm', usernameClassName)}\n          variant={usernameVariant}\n        />\n        {children}\n        {showPublicKey && !children && (\n          <UserPublicKey\n            publicKey={publicKey}\n            truncate\n            showCopyButton={showCopyButton}\n            className=\"text-muted-foreground\"\n          />\n        )}\n      </div>\n    </div>\n  );\n} ",
      "type": "registry:component",
      "target": "src/components/deso-ui/user-info.tsx"
    }
  ]
}