From 8cbdecfc7f14c24528fbe59e65647d3a4a654cff Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Sat, 17 Aug 2024 17:33:19 +0100
Subject: [PATCH] Added static design for Search page

ref https://linear.app/tryghost/issue/AP-352/search-for-mastodon-usernames-in-ghost-admin
---
 .../src/components/Search.tsx                 | 38 ++++++++++++++++++-
 .../components/activities/ActivityItem.tsx    |  1 +
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-activitypub/src/components/Search.tsx b/apps/admin-x-activitypub/src/components/Search.tsx
index 8ed44b58e5..05dfa2a608 100644
--- a/apps/admin-x-activitypub/src/components/Search.tsx
+++ b/apps/admin-x-activitypub/src/components/Search.tsx
@@ -1,6 +1,8 @@
+import APAvatar from './global/APAvatar';
+import ActivityItem from './activities/ActivityItem';
 import MainNavigation from './navigation/MainNavigation';
 import React from 'react';
-import {Icon} from '@tryghost/admin-x-design-system';
+import {Button, Icon} from '@tryghost/admin-x-design-system';
 
 interface SearchProps {}
 
@@ -9,7 +11,39 @@ const Search: React.FC<SearchProps> = ({}) => {
         <>
             <MainNavigation />
             <div className='z-0 flex w-full flex-col items-center pt-8'>
-                <div className='flex w-full max-w-[560px] items-center gap-2 rounded-full bg-grey-100 px-3 py-2 text-grey-500'><Icon name='magnifying-glass' size={18} />Search the Fediverse</div>
+                <div className='mb-6 flex w-full max-w-[560px] items-center gap-2 rounded-full bg-grey-100 px-3 py-2 text-grey-500'><Icon name='magnifying-glass' size={18} />Search the Fediverse</div>
+                <ActivityItem>
+                    <APAvatar/>
+                    <div>
+                        <div className='text-grey-600'><span className='font-bold text-black'>Lydia Mango</span> @username@domain.com</div>
+                        <div className='text-sm'>1,535 followers</div>
+                    </div>
+                    <Button className='ml-auto' label='Follow' link />
+                </ActivityItem>
+                <ActivityItem>
+                    <APAvatar/>
+                    <div>
+                        <div className='text-grey-600'><span className='font-bold text-black'>Tiana Passaquindici Arcand</span> @username@domain.com</div>
+                        <div className='text-sm'>4,545 followers</div>
+                    </div>
+                    <Button className='ml-auto' label='Follow' link />
+                </ActivityItem> 
+                <ActivityItem>
+                    <APAvatar/>
+                    <div>
+                        <div className='text-grey-600'><span className='font-bold text-black'>Gretchen Press</span> @username@domain.com</div>
+                        <div className='text-sm'>1,156 followers</div>
+                    </div>
+                    <Button className='ml-auto' label='Follow' link />
+                </ActivityItem> 
+                <ActivityItem>
+                    <APAvatar/>
+                    <div>
+                        <div className='text-grey-600'><span className='font-bold text-black'>Leo Lubin</span> @username@domain.com</div>
+                        <div className='text-sm'>1,584 followers</div>
+                    </div>
+                    <Button className='ml-auto' label='Follow' link />
+                </ActivityItem> 
             </div>
         </>
     );
diff --git a/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx b/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx
index af3ea48b3a..0a2a12b887 100644
--- a/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx
+++ b/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx
@@ -19,6 +19,7 @@ const ActivityItem: React.FC<ActivityItemProps> = ({children}) => {
             <div className='flex w-full items-center gap-3 border-b border-grey-100 py-4'>
                 {childrenArray[0]}
                 {childrenArray[1]}
+                {childrenArray[2]}
             </div>
         </div>
     );