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

[site/home][s]: add logic for images and improve card styles

This commit is contained in:
khalilcodes 2022-06-16 16:45:42 +03:00
parent 204af9a446
commit 4cbe9ff6ed
1 changed files with 60 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
)