diff --git a/apps/admin-x-activitypub/src/components/Profile.tsx b/apps/admin-x-activitypub/src/components/Profile.tsx index f0d00f3c89..a3e86d79bb 100644 --- a/apps/admin-x-activitypub/src/components/Profile.tsx +++ b/apps/admin-x-activitypub/src/components/Profile.tsx @@ -1,10 +1,10 @@ +import APAvatar from './global/APAvatar'; import MainNavigation from './navigation/MainNavigation'; -import React from 'react'; +import React, {useState} from 'react'; import {ActivityPubAPI} from '../api/activitypub'; -import {SettingValue} from '@tryghost/admin-x-design-system'; +import {Heading, NoValueLabel, Tab, TabView} from '@tryghost/admin-x-design-system'; import {useBrowseSite} from '@tryghost/admin-x-framework/api/site'; import {useQuery} from '@tanstack/react-query'; -import {useRouting} from '@tryghost/admin-x-framework/routing'; interface ProfileProps {} @@ -43,17 +43,67 @@ function useFollowingCountForUser(handle: string) { } const Profile: React.FC = ({}) => { - const {updateRoute} = useRouting(); const {data: followersCount = 0} = useFollowersCountForUser('index'); const {data: followingCount = 0} = useFollowingCountForUser('index'); + type ProfileTab = 'posts' | 'likes' | 'following' | 'followers'; + + const [selectedTab, setSelectedTab] = useState('posts'); + + const tabs = [ + { + id: 'posts', + title: 'Posts', + contents: (
+ You haven’t posted anything yet. +
), + counter: 240 + }, + { + id: 'likes', + title: 'Likes', + contents: (
+ You haven’t liked anything yet. +
), + counter: 27 + }, + { + id: 'following', + title: 'Following', + contents: (
+ You haven’t followed anyone yet. +
), + counter: followingCount + }, + { + id: 'followers', + title: 'Followers', + contents: (
+ Nobody’s following you yet. Their loss! +
), + counter: followersCount + } + ].filter(Boolean) as Tab[]; + return ( <>
-
-
-
+
+
+
+
+
+ +
+ John Doe + @index@site.com +

This is a summary/bio/etc which could be kinda long in certain cases but not always, so...

+ www.coolsite.com + containerClassName='mt-6' selectedTab={selectedTab} tabs={tabs} onTabChange={setSelectedTab} /> +
+ + {/*
updateRoute('/profile/following')}> {followingCount} Following @@ -62,7 +112,7 @@ const Profile: React.FC = ({}) => { {followersCount} Followers
-
+
*/}
diff --git a/apps/admin-x-activitypub/src/components/global/APAvatar.tsx b/apps/admin-x-activitypub/src/components/global/APAvatar.tsx index 1bfe40176d..fcba8130a2 100644 --- a/apps/admin-x-activitypub/src/components/global/APAvatar.tsx +++ b/apps/admin-x-activitypub/src/components/global/APAvatar.tsx @@ -2,14 +2,31 @@ import React from 'react'; import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub'; import {Icon} from '@tryghost/admin-x-design-system'; +type AvatarSize = 'sm' | 'lg'; + interface APAvatarProps { author?: ActorProperties; + size?: AvatarSize; } -const APAvatar: React.FC = ({author}) => { +const APAvatar: React.FC = ({author, size}) => { + let avatarSize = ''; + + switch (size) { + case 'sm': + avatarSize = ' w-10 h-10 '; + break; + case 'lg': + avatarSize = ' w-22 h-22 '; + break; + default: + avatarSize = ' w-10 h-10 '; + break; + } + return ( <> - {author && author!.icon?.url ? :
} + {author && author!.icon?.url ? :
} ); };