83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
|
import { Link, Routes } from "blitz";
|
||
|
|
import PostPreview from "./post-preview";
|
||
|
|
import type { Post } from "../../../integrations/datocms";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
posts: Post[];
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatter = Intl.DateTimeFormat("en-US", {
|
||
|
|
day: "2-digit",
|
||
|
|
month: "short",
|
||
|
|
year: "numeric",
|
||
|
|
});
|
||
|
|
|
||
|
|
export default function MoreStories({ posts }: Props) {
|
||
|
|
return (
|
||
|
|
<aside>
|
||
|
|
<div className="relative max-w-6xl mx-auto px-4 sm:px-6">
|
||
|
|
<div className="pb-12 md:pb-20">
|
||
|
|
<div className="max-w-3xl mx-auto">
|
||
|
|
<h4 className="h4 font-mackinac mb-8">Related articles</h4>
|
||
|
|
|
||
|
|
{/* Articles container */}
|
||
|
|
<div className="grid gap-4 sm:gap-6 sm:grid-cols-2">
|
||
|
|
{posts.map((post) => (
|
||
|
|
<article key={post.slug} className="relative group p-6 text-white">
|
||
|
|
<figure>
|
||
|
|
<img
|
||
|
|
className="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-75 transition duration-700 ease-out"
|
||
|
|
src={post.coverImage.responsiveImage.src}
|
||
|
|
width="372"
|
||
|
|
height="182"
|
||
|
|
alt="Related post"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 bg-primary-500 opacity-75 group-hover:opacity-50 transition duration-700 ease-out"
|
||
|
|
aria-hidden="true"
|
||
|
|
/>
|
||
|
|
</figure>
|
||
|
|
<div className="relative flex flex-col h-full">
|
||
|
|
<header className="flex-grow">
|
||
|
|
<Link href={Routes.PostPage({ slug: post.slug })}>
|
||
|
|
<a className="hover:underline">
|
||
|
|
<h3 className="text-lg font-mackinac font-bold tracking-tight mb-2">
|
||
|
|
{post.title}
|
||
|
|
</h3>
|
||
|
|
</a>
|
||
|
|
</Link>
|
||
|
|
<div className="text-sm opacity-80">
|
||
|
|
{formatter.format(new Date(post.date))}
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<footer>
|
||
|
|
{/* Author meta */}
|
||
|
|
<div className="flex items-center text-sm mt-5">
|
||
|
|
<a href="#0">
|
||
|
|
<img
|
||
|
|
className="rounded-full flex-shrink-0 mr-3"
|
||
|
|
src={post.author.picture.url}
|
||
|
|
width="32"
|
||
|
|
height="32"
|
||
|
|
alt={post.author.name}
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
<div>
|
||
|
|
<span className="opacity-75">By </span>
|
||
|
|
<span className="font-medium hover:underline">
|
||
|
|
{post.author.name}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|