51 lines
2.2 KiB
JavaScript
51 lines
2.2 KiB
JavaScript
import Link from "next/link"
|
|
import { YOUTUBE_REGEX } from "../../lib/constants"
|
|
|
|
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">
|
|
<div className="h-1/3 sm:h-2/3" />
|
|
</div>
|
|
<div className="relative max-w-7xl mx-auto">
|
|
<div className="text-center">
|
|
<h2 className="text-3xl tracking-tight font-extrabold text-white sm:text-4xl">Latest Releases</h2>
|
|
<p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
|
|
Our latest articles and explorations.
|
|
</p>
|
|
</div>
|
|
<div className="mt-12 max-w-lg mx-auto grid gap-6 lg:grid-cols-3 lg:max-w-none">
|
|
{posts && posts.map(({ title, description, image, youtube, link }) => (
|
|
<div key={link} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
|
|
<div className="h-48 bg-stone-100 flex-shrink-0">
|
|
{image && <img className="" width="100%" height="100%" src={image} alt={title} />}
|
|
</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>
|
|
<Link href={link}>
|
|
<a className="block mt-2">
|
|
<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, 120)} ...`
|
|
: description
|
|
}
|
|
</p>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|