first commit

resources/client/profile/header/profile-page-header.tsx

@@ -0,0 +1,69 @@
+import {UserAvatar} from '@common/ui/images/user-avatar';
+import {ProfileDescription} from '@app/profile/header/profile-description';
+import {FollowButton} from '@common/users/follow-button';
+import React from 'react';
+import {useAuth} from '@common/auth/use-auth';
+import {User} from '@common/auth/user';
+import {Trans} from '@common/i18n/trans';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {Button} from '@common/ui/buttons/button';
+import {EditIcon} from '@common/icons/material/Edit';
+import {EditUserProfileDialog} from '@app/profile/edit-user-profile-dialog';
+import {ProfileStatsList} from '@app/profile/header/profile-stats-list';
+import {ProfileLinks} from '@app/profile/header/profile-links';
+import {Chip} from '@common/ui/forms/input-field/chip-field/chip';
+
+interface Props {
+  user: User;
+}
+export function ProfilePageHeader({user}: Props) {
+  const {user: currentUser} = useAuth();
+  return (
+    <div className="flex flex-col md:flex-row items-center gap-24">
+      <UserAvatar user={user} circle size="w-140 h-140" />
+      <div className="flex-auto">
+        <div className="flex items-center mb-8 gap-8">
+          <h1 className="text-2xl font-bold">{user.display_name}</h1>
+          {user.is_pro && (
+            <Chip size="xs" color="primary" radius="rounded" className="mt-2">
+              <Trans message="PRO" />
+            </Chip>
+          )}
+        </div>
+        <ProfileDescription profile={user.profile} />
+        <div className="flex items-center gap-14 mt-12">
+          {currentUser?.id !== user.id && (
+            <FollowButton
+              variant="outline"
+              color="primary"
+              size="xs"
+              user={user}
+            />
+          )}
+          {currentUser?.id === user.id && <EditButton user={user} />}
+        </div>
+      </div>
+      <div>
+        <ProfileStatsList user={user} />
+        <ProfileLinks
+          links={user.links}
+          className="flex-shrink-0 ml-auto mt-12"
+        />
+      </div>
+    </div>
+  );
+}
+
+interface EditButtonProps {
+  user: User;
+}
+function EditButton({user}: EditButtonProps) {
+  return (
+    <DialogTrigger type="modal">
+      <Button variant="outline" size="xs" startIcon={<EditIcon />}>
+        <Trans message="Edit profile" />
+      </Button>
+      <EditUserProfileDialog user={user} />
+    </DialogTrigger>
+  );
+}