From 4cbe9ff6edd2d0a23d5fedb7a38b827bb8a3901f Mon Sep 17 00:00:00 2001
From: khalilcodes <khalilali.j@gmail.com>
Date: Thu, 16 Jun 2022 16:45:42 +0300
Subject: [PATCH] [site/home][s]: add logic for images and improve card styles

---
 site/components/Home/Latest.js | 87 +++++++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 27 deletions(-)

diff --git a/site/components/Home/Latest.js b/site/components/Home/Latest.js
index d12c367..614e604 100644
--- a/site/components/Home/Latest.js
+++ b/site/components/Home/Latest.js
@@ -1,4 +1,20 @@
+// import { useState } from "react"
+import Link from "next/link"
+import { YOUTUBE_REGEX } from "../../lib/constants"
+import { getYoutube } from "../../utils/getYoutube"
+
 export function Latest({ posts }) {
+  // const initialValue = 6
+  // const [ value, setValue ] = useState(initialValue)
+  // const initialPosts = posts && posts.slice(0, value)
+
+  // const handleButton = () => {
+  //   setValue(prev => 
+  //     initialPosts.length === posts.length 
+  //     ? initialValue
+  //     : prev + 3)
+  // }
+
   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">
@@ -11,37 +27,54 @@ export function Latest({ posts }) {
             Our latest articles and explorations.
           </p>
         </div>
-        <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
-          {posts && posts.map((post) => (
-            <div key={post.title} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
-              {post.image ? 
-                <div className="h-48 flex-shrink-0">
-                  <img className="" width="100%" height="100%" src={post.image} alt={post.title} />
-                </div>
-                : <div className="h-20 w-full bg-slate-500" />
-              }
-              <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">
-                    {post.youtube && ["watch", "embed"].some(v => post.youtube.includes(v)) && (
-                      <a href={post.youtube} className="hover:underline">
-                      Video
-                    </a>)}
-                  </p>
-                  <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 && post.description.length > 150 && !!post.image
-                        ? `${post.description.slice(0, 150)} ...` 
-                        : post.description
-                      }
+        <div className="mt-12 max-w-lg mx-auto grid gap-6 lg:grid-cols-3 lg:max-w-none">
+          {posts && posts.map(({ _id, title, description, image, youtube, link }) => {
+            const { thumbnail } = getYoutube(youtube)
+            const imageSource = image || thumbnail
+            return (
+              <div key={_id} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
+                  <div className="h-48 bg-stone-100 flex-shrink-0">
+                    {imageSource ?
+                      <img className="" width="100%" height="100%" src={imageSource} alt={title} />
+                      : (
+                        <div className="border-2 border-slate-900 m-2 inline-flex h-full text-xl font-bold tracking-tight text-left items-center p-4 text-[#000]">
+                          <Link href={link}>
+                            <a>{title}</a>
+                          </Link>
+                        </div>
+                        )
+                    }
+                  </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">
+                      {youtube && YOUTUBE_REGEX.test(youtube) ? (
+                        <a target="_blank" rel="noopener" href={youtube} className="hover:underline">
+                        Video
+                      </a>) : <p>Article</p>}
                     </p>
-                  </a>
+                    <Link href={link}>
+                      <a className="block mt-2">
+                        {(imageSource) && <p className="text-xl font-semibold text-slate-900 dark:text-slate-300">{title}</p>}
+                        <p className="mt-3 text-base text-gray-500">
+                          {description && description.length > 150
+                            ? `${description.slice(0, imageSource ? 120 : 240)} ...` 
+                            : description
+                          }
+                        </p>
+                      </a>
+                    </Link>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            )
+          })}
         </div>
+        {/* <div className="w-full flex justify-center pt-12">
+          {!(posts.length === initialPosts.length && value === initialValue) &&
+            <button onClick={handleButton}>{initialPosts.length === posts.length ? "show less" : "show more"}</button>
+          }
+        </div> */}
       </div>
     </div>
   )