mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Updated details
This commit is contained in:
parent
5cef5d9f20
commit
690888f3ea
3 changed files with 21 additions and 18 deletions
|
@ -1,10 +1,9 @@
|
|||
import * as React from 'react';
|
||||
import APAvatar from '@components/global/APAvatar';
|
||||
import ActivityItem from '@components/activities/ActivityItem';
|
||||
import Separator from '@components/global/Separator';
|
||||
import getName from '@utils/get-name';
|
||||
import getUsername from '@utils/get-username';
|
||||
import {Skeleton} from '@tryghost/shade';
|
||||
import {H4, LucideIcon, Skeleton} from '@tryghost/shade';
|
||||
import {handleProfileClick} from '@utils/handle-profile-click';
|
||||
import {useSuggestedProfilesForUser} from '@hooks/use-activity-pub-queries';
|
||||
|
||||
|
@ -14,8 +13,16 @@ const Recommendations: React.FC = () => {
|
|||
const suggested = suggestedData || Array(3).fill({actor: {}});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className='mb-1 text-lg font-semibold'>Suggestions to follow</h2>
|
||||
<div className='px-3'>
|
||||
<div className='mb-3 flex flex-col gap-0.5'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<LucideIcon.Globe className='text-purple-500' size={20} strokeWidth={1.5} />
|
||||
<H4>Follow suggestions</H4>
|
||||
</div>
|
||||
<span className='text-sm text-gray-600'>
|
||||
Accounts you might be interested in
|
||||
</span>
|
||||
</div>
|
||||
<ul className='grow'>
|
||||
{suggested.map((profile, index) => {
|
||||
const actor = profile.actor;
|
||||
|
@ -27,12 +34,11 @@ const Recommendations: React.FC = () => {
|
|||
>
|
||||
{!isLoadingSuggested ? <APAvatar author={actor} /> : <Skeleton className='z-10 h-10 w-10' />}
|
||||
<div className='flex min-w-0 flex-col'>
|
||||
<span className='block w-full truncate font-semibold text-black'>{!isLoadingSuggested ? getName(actor) : <Skeleton className='w-24' />}</span>
|
||||
<span className='block w-full truncate text-sm text-gray-600'>{!isLoadingSuggested ? getUsername(actor) : <Skeleton className='w-40' />}</span>
|
||||
<span className='block max-w-[190px] truncate font-semibold text-black'>{!isLoadingSuggested ? getName(actor) : <Skeleton className='w-24' />}</span>
|
||||
<span className='block max-w-[190px] truncate text-sm text-gray-600'>{!isLoadingSuggested ? getUsername(actor) : <Skeleton className='w-40' />}</span>
|
||||
</div>
|
||||
</ActivityItem>
|
||||
</li>
|
||||
{index < suggested.length - 1 && <Separator />}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
|
|
@ -19,8 +19,8 @@ const Sidebar: React.FC<SidebarProps> = ({route}) => {
|
|||
'[&>*]:pointer-events-auto'
|
||||
)}
|
||||
>
|
||||
<div className='flex flex-col gap-8 pl-5 pt-5'>
|
||||
<div className='flex flex-col gap-px'>
|
||||
<div className='flex w-full flex-col items-start gap-8 pl-4 pt-4'>
|
||||
<div className='flex w-full flex-col gap-px'>
|
||||
<SidebarButton active={route === 'inbox'} onClick={() => updateRoute('inbox')}>
|
||||
<LucideIcon.Inbox size={18} strokeWidth={1.5} />
|
||||
Inbox
|
||||
|
@ -38,13 +38,10 @@ const Sidebar: React.FC<SidebarProps> = ({route}) => {
|
|||
Profile
|
||||
</SidebarButton>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button className='rounded-full bg-purple-500' onClick={() => updateRoute('feed')}>
|
||||
<LucideIcon.FilePen />
|
||||
New note
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
|
|
|
@ -60,7 +60,7 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className='mb-5 mt-4 flex w-full flex-col'>
|
||||
<div className='my-4 flex w-full flex-col'>
|
||||
<div className='w-full'>
|
||||
{activities.length > 0 ? (
|
||||
<>
|
||||
|
|
Loading…
Add table
Reference in a new issue