63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { TinaMarkdown } from "tinacms/dist/rich-text";
|
|
import { BsArrowRight } from "react-icons/bs";
|
|
import format from "date-fns/format";
|
|
import { PostsType } from "../../pages/posts";
|
|
|
|
export const Posts = ({ data }: { data: PostsType[] }) => {
|
|
return (
|
|
<>
|
|
{data.map((postData) => {
|
|
const post = postData.node;
|
|
const date = new Date(post.date);
|
|
let formattedDate = "";
|
|
if (!isNaN(date.getTime())) {
|
|
formattedDate = format(date, "MMM dd, yyyy");
|
|
}
|
|
return (
|
|
<Link
|
|
key={post._sys.filename}
|
|
href={`/posts/` + post._sys.filename}
|
|
className="group block px-6 sm:px-8 md:px-10 py-10 mb-8 last:mb-0 bg-gray-50 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-1000 rounded-md shadow-sm transition-all duration-150 ease-out hover:shadow-md hover:to-gray-50 dark:hover:to-gray-800"
|
|
>
|
|
<h3
|
|
className={`text-gray-700 dark:text-white text-3xl lg:text-4xl font-semibold title-font mb-5 transition-all duration-150 ease-out`}
|
|
>
|
|
{post.title}{" "}
|
|
<span className="inline-block opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out">
|
|
<BsArrowRight className="inline-block h-8 -mt-1 ml-1 w-auto opacity-70" />
|
|
</span>
|
|
</h3>
|
|
<div className="prose dark:prose-dark w-full max-w-none mb-5 opacity-70">
|
|
<TinaMarkdown content={post.excerpt} />
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="flex-shrink-0 mr-2">
|
|
<img
|
|
className="h-10 w-10 object-cover rounded-full shadow-sm"
|
|
src={post?.author?.avatar}
|
|
alt={post?.author?.name}
|
|
/>
|
|
</div>
|
|
<p className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white">
|
|
{post?.author?.name}
|
|
</p>
|
|
{formattedDate !== "" && (
|
|
<>
|
|
<span className="font-bold text-gray-200 dark:text-gray-500 mx-2">
|
|
—
|
|
</span>
|
|
<p className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150">
|
|
{formattedDate}
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|