{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-cover-photo",
  "type": "registry:block",
  "title": "Profile Cover Photo",
  "description": "A component for displaying a user's cover photo.",
  "files": [
    {
      "path": "src/components/deso/profile-cover-photo.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { useProfile } from '@/hooks/useProfile';\nimport { cn } from '@/lib/utils/deso';\nimport { AspectRatio } from '@/components/ui/aspect-ratio';\n\ntype AspectRatioString = '16:9' | '3:1' | '2:1' | '4:3';\ntype GradientColor = 'blue' | 'purple' | 'pink' | 'green' | 'orange' | 'random';\n\ninterface ProfileCoverPhotoProps {\n  publicKey: string;\n  aspectRatio?: AspectRatioString;\n  fallbackGradient?: GradientColor;\n  showOverlay?: boolean;\n  overlayOpacity?: number;\n  enableParallax?: boolean;\n  className?: string;\n  children?: React.ReactNode;\n}\n\n// Aspect ratio configurations\nconst aspectRatioConfig = {\n  '16:9': 'aspect-video',\n  '3:1': 'aspect-[3/1]',\n  '2:1': 'aspect-[2/1]',\n  '4:3': 'aspect-[4/3]',\n} as const;\n\n// Gradient configurations\nconst gradientConfig = {\n  blue: 'bg-gradient-to-br from-blue-400 to-blue-600',\n  purple: 'bg-gradient-to-br from-purple-400 to-purple-600',\n  pink: 'bg-gradient-to-br from-pink-400 to-pink-600',\n  green: 'bg-gradient-to-br from-green-400 to-green-600',\n  orange: 'bg-gradient-to-br from-orange-400 to-orange-600',\n  random: 'bg-gradient-to-br from-indigo-400 via-purple-400 to-pink-400',\n} as const;\n\nconst getAspectRatioValue = (ratio: AspectRatioString): number => {\n  const [w, h] = ratio.split(':').map(Number);\n  return w / h;\n};\n\nexport function ProfileCoverPhoto({\n  publicKey,\n  aspectRatio = '16:9',\n  fallbackGradient = 'blue',\n  showOverlay = false,\n  overlayOpacity = 0.3,\n  enableParallax = false,\n  className,\n  children,\n}: ProfileCoverPhotoProps) {\n  // Fetch profile data using Apollo Client\n  const { profile, loading, error } = useProfile(publicKey);\n\n  // Use FeaturedImageURL from extraData for the cover photo\n  const featuredImage = profile?.extraData?.FeaturedImageURL;\n  const aspectClass = aspectRatioConfig[aspectRatio];\n  const gradientClass = gradientConfig[fallbackGradient];\n\n  const aspectRatioValue = getAspectRatioValue(aspectRatio);\n\n  if (loading) {\n    return (\n      <AspectRatio ratio={aspectRatioValue}>\n        <Skeleton className=\"w-full h-full\" />\n      </AspectRatio>\n    );\n  }\n\n  if (error || !featuredImage) {\n    return (\n      <AspectRatio ratio={aspectRatioValue}>\n        <div className=\"w-full h-full bg-slate-200\" />\n      </AspectRatio>\n    );\n  }\n\n  return (\n    <AspectRatio\n      ratio={aspectRatioValue}\n      className={cn(\n        'relative w-full h-full overflow-hidden rounded-lg',\n        className\n      )}\n    >\n      <div\n        className=\"absolute inset-0 bg-cover bg-center bg-no-repeat\"\n        style={{ backgroundImage: `url(\"${featuredImage}\")` }}\n      />\n      {showOverlay && (\n        <div \n          className=\"absolute inset-0 bg-black\"\n          style={{ opacity: overlayOpacity }}\n        />\n      )}\n          {children}\n    </AspectRatio>\n  );\n}\n\n// Export with display name for debugging\nProfileCoverPhoto.displayName = 'ProfileCoverPhoto'; ",
      "type": "registry:component",
      "target": "src/components/deso-ui/profile-cover-photo.tsx"
    }
  ]
}