posts.tsx (3467B)
1 import React from "react"; 2 import Link from "next/link"; 3 import { TinaMarkdown } from "tinacms/dist/rich-text"; 4 import { BsArrowRight } from "react-icons/bs"; 5 import { useTheme } from "../layout"; 6 import {format} from "date-fns"; 7 import { PostsType } from "../../pages/posts"; 8 import Image from "next/image"; 9 10 export const Posts = ({ data }: { data: PostsType[] }) => { 11 const theme = useTheme(); 12 const titleColorClasses = { 13 blue: "group-hover:text-blue-600 dark:group-hover:text-blue-300", 14 teal: "group-hover:text-teal-600 dark:group-hover:text-teal-300", 15 green: "group-hover:text-green-600 dark:group-hover:text-green-300", 16 red: "group-hover:text-red-600 dark:group-hover:text-red-300", 17 pink: "group-hover:text-pink-600 dark:group-hover:text-pink-300", 18 purple: "group-hover:text-purple-600 dark:group-hover:text-purple-300", 19 orange: "group-hover:text-orange-600 dark:group-hover:text-orange-300", 20 yellow: "group-hover:text-yellow-500 dark:group-hover:text-yellow-300", 21 }; 22 23 return ( 24 <> 25 {data.map((postData) => { 26 const post = postData.node; 27 const date = new Date(post.date); 28 let formattedDate = ""; 29 if (!isNaN(date.getTime())) { 30 formattedDate = format(date, "MMM dd, yyyy"); 31 } 32 return ( 33 <Link 34 key={post._sys.filename} 35 href={`/posts/` + post._sys.breadcrumbs.join("/")} 36 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" 37 > 38 <h3 39 className={`text-gray-700 dark:text-white text-3xl lg:text-4xl font-semibold title-font mb-5 transition-all duration-150 ease-out ${ 40 titleColorClasses[theme.color] 41 }`} 42 > 43 {post.title}{" "} 44 <span className="inline-block opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"> 45 <BsArrowRight className="inline-block h-8 -mt-1 ml-1 w-auto opacity-70" /> 46 </span> 47 </h3> 48 <div className="prose dark:prose-dark w-full max-w-none mb-5 opacity-70"> 49 <TinaMarkdown content={post.excerpt} /> 50 </div> 51 <div className="flex items-center"> 52 <div className="flex-shrink-0 mr-2"> 53 <Image 54 width={500} 55 height={500} 56 className="h-10 w-10 object-cover rounded-full shadow-sm" 57 src={post?.author?.avatar} 58 alt={post?.author?.name} 59 /> 60 </div> 61 <p className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white"> 62 {post?.author?.name} 63 </p> 64 {formattedDate !== "" && ( 65 <> 66 <span className="font-bold text-gray-200 dark:text-gray-500 mx-2"> 67 — 68 </span> 69 <p className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150"> 70 {formattedDate} 71 </p> 72 </> 73 )} 74 </div> 75 </Link> 76 ); 77 })} 78 </> 79 ); 80 };