Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Added Ghost favicons to recommendations with 1-click subscribe

Browse source 
refs https://github.com/TryGhost/Product/issues/3902
This commit is contained in:
Djordje Vlaisavljevic 2023-09-20 14:33:54 +01:00
parent 88c9ee8a34
commit 8927d911cf
1 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationList.tsx
View file

@ -3,6 +3,7 @@ import React from 'react';
import RecommendationIcon from './RecommendationIcon';
import Table from '../../../../admin-x-ds/global/Table';
import TableCell from '../../../../admin-x-ds/global/TableCell';
// import TableHead from '../../../../admin-x-ds/global/TableHead';
import TableRow from '../../../../admin-x-ds/global/TableRow';
import useRouting from '../../../../hooks/useRouting';
import {PaginationData} from '../../../../hooks/usePagination';
@ -30,24 +31,26 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
<div className='group flex items-center gap-3 hover:cursor-pointer'>
<div className={`flex grow flex-col`}>
<div className="mb-0.5 flex items-center gap-2">
<RecommendationIcon {...recommendation} />
<RecommendationIcon showSubscribes={showSubscribes} {...recommendation} />
<span className='line-clamp-1 font-medium'>{recommendation.title}</span>
{showSubscribes && <span className='-mb-px inline-flex h-[19px] shrink-0 items-center rounded-full bg-grey-200 px-1.5 py-0.5 text-2xs font-semibold uppercase tracking-wide text-grey-700'>1-click subscribe</span>}
</div>
<span className='line-clamp-1 text-xs leading-snug text-grey-700'>{recommendation.url || 'No reason added'}</span>
</div>
</div>
</TableCell>
<TableCell className='hidden md:!visible md:!table-cell' onClick={showDetails}>
<div className={`flex grow flex-col`}>
{count === 0 ? <span className="text-grey-500">0</span> : <span>{count}</span>}
<span className='whitespace-nowrap text-xs text-grey-700'>{showSubscribes ? 'Subscribers from you' : 'Clicks from you'}</span>
</div>
<TableCell className='hidden w-1/3 md:!visible md:!table-cell' onClick={showDetails}>
{(count === 0) ? (<span className="text-grey-500">-</span>) : (<div className='flex grow flex-col'>
<span>{count}</span>
<span className='whitespace-nowrap text-xs text-grey-700'>{showSubscribes ? ('Subscribers from you') : ('Clicks from you')}</span>
</div>)}
</TableCell>
</TableRow>
);
};
// TODO: Remove if we decide we don't need headers
// const tableHeader = (<><TableHead>Site</TableHead><TableHead>Conversions from you</TableHead></>);
const RecommendationList: React.FC<RecommendationListProps> = ({recommendations, pagination, isLoading}) => {
if (isLoading || recommendations.length) {
return <Table hint='Readers will see your recommendations in randomized order' isLoading={isLoading} pagination={pagination} hintSeparator>