mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +03:00
Recommendations settings design tweaks (#17875)
refs https://github.com/TryGhost/Product/issues/3791 - Added realistic recommendations placeholders - Slightly improved Recommendations list design
This commit is contained in:
parent
310f01da0b
commit
feb55ccc00
@ -34,7 +34,7 @@ const Table: React.FC<TableProps> = ({children, borderTop, hint, hintSeparator,
|
||||
</tbody>
|
||||
</table>
|
||||
{hint &&
|
||||
<div className='mt-1'>
|
||||
<div>
|
||||
{hintSeparator && <Separator />}
|
||||
<div className="flex justify-between">
|
||||
<Hint>{hint}</Hint>
|
||||
|
@ -51,11 +51,11 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
|
||||
|
||||
const RecommendationList: React.FC<RecommendationListProps> = ({recommendations}) => {
|
||||
if (recommendations.length) {
|
||||
return <Table>
|
||||
return <Table hint='Readers will see your recommendations in randomized order' hintSeparator>
|
||||
{recommendations.map(recommendation => <RecommendationItem key={recommendation.id} recommendation={recommendation} />)}
|
||||
</Table>;
|
||||
} else {
|
||||
return <NoValueLabel icon='mail-block'>
|
||||
return <NoValueLabel icon='thumbs-up'>
|
||||
No recommendations yet.
|
||||
</NoValueLabel>;
|
||||
}
|
||||
|
@ -4,21 +4,48 @@ import {RecommendationRepository} from "./RecommendationRepository";
|
||||
export class InMemoryRecommendationRepository implements RecommendationRepository {
|
||||
recommendations: Recommendation[] = [
|
||||
new Recommendation({
|
||||
title: "Product Marketing Alliance",
|
||||
reason: "This is a great book for any developer, regardless of their experience level. It's a classic that's stood the test of time.",
|
||||
title: "She‘s A Beast",
|
||||
reason: "She helped me get back into the gym after 8 years of chilling",
|
||||
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
|
||||
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
|
||||
favicon: "https://www.productmarketingalliance.com/favicon.ico",
|
||||
url: "https://www.productmarketingalliance.com/",
|
||||
oneClickSubscribe: true
|
||||
favicon: "https://www.shesabeast.co/content/images/size/w256h256/2022/08/transparent-icon-black-copy-gray-bar.png",
|
||||
url: "https://www.thepragmaticprogrammer.com/",
|
||||
oneClickSubscribe: false
|
||||
}),
|
||||
new Recommendation({
|
||||
title: "The Lever",
|
||||
reason: "This is a great book for any developer, regardless of their experience level. It's a classic that's stood the test of time.",
|
||||
title: "Lenny‘s Newsletter",
|
||||
reason: "He knows his stuff about product management and gives away lots of content for free. Highly recommended!",
|
||||
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
|
||||
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
|
||||
favicon: "https://www.levernews.com/content/images/size/w256h256/2022/03/LEVERFavicon-BorderWhite.png",
|
||||
url: "https://www.levernews.com",
|
||||
favicon: "https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fc7cde267-8f9e-47fa-9aef-5be03bad95ed%2Fapple-touch-icon-1024x1024.png",
|
||||
url: "https://www.thepragmaticprogrammer.com/",
|
||||
oneClickSubscribe: false
|
||||
}),
|
||||
new Recommendation({
|
||||
title: "Clickhole",
|
||||
reason: "Funny",
|
||||
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
|
||||
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
|
||||
favicon: "https://clickhole.com/wp-content/uploads/2020/05/cropped-clickhole-icon-180x180.png",
|
||||
url: "https://www.thepragmaticprogrammer.com/",
|
||||
oneClickSubscribe: false
|
||||
}),
|
||||
new Recommendation({
|
||||
title: "The Verge",
|
||||
reason: "Consistently best tech news, I read it every day!",
|
||||
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
|
||||
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
|
||||
favicon: "https://www.theverge.com/icons/apple_touch_icon.png",
|
||||
url: "https://www.thepragmaticprogrammer.com/",
|
||||
oneClickSubscribe: false
|
||||
}),
|
||||
new Recommendation({
|
||||
title: "The Counteroffensive with Tim Mak",
|
||||
reason: "On-the-ground war reporting from Ukraine.",
|
||||
excerpt: "The Pragmatic Programmer is one of those rare tech books you’ll read, re-read, and read again over the years. Whether you’re new to the field or an experienced practitioner, you’ll come away with fresh insights each and every time.",
|
||||
featuredImage: "https://www.thepragmaticprogrammer.com/image.png",
|
||||
favicon: "https://substackcdn.com/image/fetch/w_96,h_96,c_fill,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ff3f2b2ad-681f-45e1-9496-db80f45e853d_403x403.png",
|
||||
url: "https://www.thepragmaticprogrammer.com/",
|
||||
oneClickSubscribe: true
|
||||
})
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user