From ec6c9c40b739c93c2703e5dcefa96aaa8b735c7e Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Wed, 27 Apr 2022 18:50:39 +0300
Subject: [PATCH] [site/home]: update component to use pages/posts from
 featured

---
 site/components/Home/Latest.js | 52 +++++++++++-----------------------
 1 file changed, 16 insertions(+), 36 deletions(-)

diff --git a/site/components/Home/Latest.js b/site/components/Home/Latest.js
index e6fb11b..f65cd14 100644
--- a/site/components/Home/Latest.js
+++ b/site/components/Home/Latest.js
@@ -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>