Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x 1x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x 21x | 'use client';
import { ReactNode } from 'react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { getInitials, stringToColor } from '@/lib/utils';
interface ProfileHeaderProps {
displayName: string;
role?: string | null;
bio?: string | null;
avatarUrl?: string | null;
identityCode: string;
verificationBadge?: ReactNode;
}
export function ProfileHeader({
displayName,
role,
bio,
avatarUrl,
identityCode: _identityCode,
verificationBadge,
}: ProfileHeaderProps) {
const initials = getInitials(displayName);
const fallbackColor = stringToColor(displayName);
return (
<div className="flex flex-col items-center text-center sm:flex-row sm:items-start sm:text-left">
{/* Avatar with Verification Badge */}
<div className="flex flex-col items-center">
<Avatar className="h-24 w-24 sm:h-32 sm:w-32">
<AvatarImage src={avatarUrl || undefined} alt={displayName} />
<AvatarFallback
className="text-2xl font-semibold text-white"
style={{ backgroundColor: fallbackColor }}
>
{initials}
</AvatarFallback>
</Avatar>
{verificationBadge && <div className="mt-2">{verificationBadge}</div>}
</div>
{/* Info */}
<div className="mt-4 sm:ml-6 sm:mt-0">
<h1 className="text-3xl font-bold">{displayName}</h1>
{role && <p className="mt-1 text-lg text-muted-foreground">{role}</p>}
{bio && <p className="mt-3 max-w-2xl text-muted-foreground">{bio}</p>}
</div>
</div>
);
}
|