jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[site/home]: update component to use pages/posts from featured

This commit is contained in:
khalilcodes 2022-04-27 18:50:39 +03:00
parent 6fb734eccd
commit ec6c9c40b7
1 changed files with 16 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
site/components/Home/Latest.js
View File

@ -1,32 +1,4 @@
const posts = [
{
title: 'Open Collective, Steward Ownership & Exit to Community with Pia Mancini',
href: 'https://www.youtube.com/watch?v=C2KYJiQVtIM',
category: { name: 'Video', href: '#' },
description: 'In this episode with Pia Mancini about her work to make community finance transparent and sustainable with Open Collective, her commitment ot steward ownership and the value of an exit to community.',
imageUrl: '/img/Pia Mancini Thumbnail.jpg'
},
{
title: 'Collective Action Problems & Climate Change',
href: 'https://www.youtube.com/watch?v=SLXtnCL6IxE',
category: { name: 'Video', href: '#' },
description: 'In this episode we use the example of KlimaDAO to explore the interaction between climate change and the public goods problem.',
datetime: '2022-03-01',
imageUrl: '/img/Collective Action Climate.png'
},
{
title: 'Web3 and Post-State Technocracy',
href: 'https://www.youtube.com/watch?v=gZ0iCJkM3PU',
category: { name: 'Video', href: '#' },
description: 'In this episode we explore the aspirational transition from the existing US-led international order to a world in which blockchain technology and technocracy are the new foundations for global human governance.',
datetime: '2022-02-17',
imageUrl: '/img/technocracy.jpg',
},
]
export function Latest() {
export function Latest({ posts }) {
return (
<div className="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div className="absolute inset-0">
@ -40,21 +12,29 @@ export function Latest() {
</p>
</div>
<div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
{posts.map((post) => (
{posts && posts.map((post) => (
<div key={post.title} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div className="flex-shrink-0">
<img className="h-48 w-full object-cover" src={post.imageUrl} alt="" />
{post.image ? <img className="h-48 w-full object-cover" src={post.image} alt={post.title} />
: <div className="h-20 w-full bg-slate-500" />
}
</div>
<div className="flex-1 bg-slate-800 p-6 flex flex-col justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-indigo-600 dark:text-yellow-500">
<a href={post.category.href} className="hover:underline">
{post.category.name}
</a>
{post.youtube && ["watch", "embed"].some(v => post.youtube.includes(v)) && (
<a href={post.youtube} className="hover:underline">
Video
</a>)}
</p>
<a href={post.href} className="block mt-2">
<a href={post.link} className="block mt-2">
<p className="text-xl font-semibold text-slate-900 dark:text-slate-300">{post.title}</p>
<p className="mt-3 text-base text-gray-500">{post.description}</p>
<p className="mt-3 text-base text-gray-500">
{post.description && post.description.length > 150 && !!post.image
? `${post.description.slice(0, 150)} ...`
: post.description
}
</p>
</a>
</div>
</div>