Function ProfileHeader

packages/shared/src/components/profile/ProfileHeader.tsx:60–175

({
  user,
  userStats,
  isSameUser: propIsSameUser,
  isPreviewMode,
  actions,
}: ProfileHeaderProps)

};

const ProfileHeader = ({
  user,
  userStats,
  isSameUser: propIsSameUser,
  isPreviewMode,
  actions,
}: ProfileHeaderProps) => {
  const { name, username, bio, image, cover, isPlus } = user;
  const { user: loggedUser } = useAuthContext();
  const isSameUser = propIsSameUser ?? loggedUser?.id === user.id;

  return (
    <div className="relative w-full overflow-hidden laptop:rounded-t-16">
      <ProfileDesktopPwaBackButton className="absolute left-4 top-4 z-1" />
      <div className="h-36">
        <Image src={cover} alt="Cover" className="h-full w-full object-cover" />
      </div>
      <Image
        src={image}
        fallbackSrc={fallbackImages.avatar}
        alt="Avatar"
        className="absolute left-6 top-16 h-[7.5rem] w-[7.5rem] rounded-16 object-cover"
      />
      <div className="flex flex-col gap-3 px-6">
        {/* Edit leads and `actions` trails, because edit is only hidden, not
            removed: it holds its width so the row keeps its height for a
            visitor. Trailing, that reserved width sat between the actions and
            the right edge and left them looking short of it; leading, it falls
            on the inside and whatever trails stays flush either way. */}
        <div className="mb-4 ml-auto mt-2 flex items-center gap-2">
          <Link passHref href={`${webappUrl}settings/profile`}>
            <Button
              className={classNames(
                'text-text-secondary',
                !isSameUser && 'invisible',
              )}
              tag="a"
              disabled={!isSameUser}
              variant={ButtonVariant.Float}
              icon={<EditIcon />}
              aria-label="Edit profile"
            />
          </Link>
          {actions}
        </div>
        <div className="flex items-center gap-1">
          <Typography type={TypographyType.Title2} bold>
            {name}
          </Typography>
          {isPlus && (
            <DevPlusIcon
              className="text-action-plus-default"
              size={IconSize.Size16}
            />
          )}
        </div>
        <div className="flex flex-col gap-2">
          {bio && <Typography type={TypographyType.Body}>{bio}</Typography>}