Profile Cover Photo

1'use client';
2 
3import React from 'react';
4import { Skeleton } from '@/components/ui/skeleton';
5import { useProfile } from '@/hooks/useProfile';
6import { cn } from '@/lib/utils/deso';
7import { AspectRatio } from '@/components/ui/aspect-ratio';
8 
9type AspectRatioString = '16:9' | '3:1' | '2:1' | '4:3';
10type GradientColor = 'blue' | 'purple' | 'pink' | 'green' | 'orange' | 'random';
11 
12interface ProfileCoverPhotoProps {
13  publicKey: string;
14  aspectRatio?: AspectRatioString;
15  fallbackGradient?: GradientColor;
16  showOverlay?: boolean;
17  overlayOpacity?: number;
18  enableParallax?: boolean;
19  className?: string;
20  children?: React.ReactNode;
21}
22 
23// Aspect ratio configurations
24const aspectRatioConfig = {
25  '16:9': 'aspect-video',
26  '3:1': 'aspect-[3/1]',
27  '2:1': 'aspect-[2/1]',
28  '4:3': 'aspect-[4/3]',
29} as const;
30 
31// Gradient configurations
32const gradientConfig = {
33  blue: 'bg-gradient-to-br from-blue-400 to-blue-600',
34  purple: 'bg-gradient-to-br from-purple-400 to-purple-600',
35  pink: 'bg-gradient-to-br from-pink-400 to-pink-600',
36  green: 'bg-gradient-to-br from-green-400 to-green-600',
37  orange: 'bg-gradient-to-br from-orange-400 to-orange-600',
38  random: 'bg-gradient-to-br from-indigo-400 via-purple-400 to-pink-400',
39} as const;
40 
41const getAspectRatioValue = (ratio: AspectRatioString): number => {
42  const [w, h] = ratio.split(':').map(Number);
43  return w / h;
44};
45 
46export function ProfileCoverPhoto({
47  publicKey,
48  aspectRatio = '16:9',
49  fallbackGradient = 'blue',
50  showOverlay = false,
51  overlayOpacity = 0.3,
52  enableParallax = false,
53  className,
54  children,
55}: ProfileCoverPhotoProps) {
56  // Fetch profile data using Apollo Client
57  const { profile, loading, error } = useProfile(publicKey);
58 
59  // Use FeaturedImageURL from extraData for the cover photo
60  const featuredImage = profile?.extraData?.FeaturedImageURL;
61  const aspectClass = aspectRatioConfig[aspectRatio];
62  const gradientClass = gradientConfig[fallbackGradient];
63 
64  const aspectRatioValue = getAspectRatioValue(aspectRatio);
65 
66  if (loading) {
67    return (
68      <AspectRatio ratio={aspectRatioValue}>
69        <Skeleton className="w-full h-full" />
70      </AspectRatio>
71    );
72  }
73 
74  if (error || !featuredImage) {
75    return (
76      <AspectRatio ratio={aspectRatioValue}>
77        <div className="w-full h-full bg-slate-200" />
78      </AspectRatio>
79    );
80  }
81 
82  return (
83    <AspectRatio
84      ratio={aspectRatioValue}
85      className={cn(
86        'relative w-full h-full overflow-hidden rounded-lg',
87// … truncated