Function ProfileHeader

packages/shared/src/components/profile/ProfileHeader.tsx:55–153

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

};

const ProfileHeader = ({
  user,
  userStats,
  isSameUser: propIsSameUser,
  isPreviewMode,
}: 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">
        <Link passHref href={`${webappUrl}settings/profile`}>
          <Button
            className={classNames(
              'mb-4 ml-auto mt-2 text-text-secondary',
              !isSameUser && 'invisible',
            )}
            tag="a"
            disabled={!isSameUser}
            variant={ButtonVariant.Float}
            icon={<EditIcon />}
            aria-label="Edit profile"
          />
        </Link>
        <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>}
          <div className="flex items-center">
            {!!user?.companies?.length && (
              <VerifiedCompanyUserBadge
                size={ProfileImageSize.XSmall}
                user={user}
                showCompanyName
                showVerified={false}
                companyNameTypography={{
                  type: TypographyType.Subhead,