27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
import Link from "next/link"
|
|
import type { Post } from "@/lib/api"
|
|
|
|
interface PostPreviewProps {
|
|
post: Post
|
|
}
|
|
|
|
export function PostPreview({ post }: PostPreviewProps) {
|
|
return (
|
|
<div className="group post-card p-6 rounded-lg hover:bg-secondary/30 transition-all duration-300">
|
|
<Link href={`/posts/${post.slug}`} className="block no-underline">
|
|
<h2 className="text-2xl font-bold tracking-tight mb-2 post-link group-hover:bg-gradient-to-r group-hover:from-purple-400 group-hover:to-pink-600 group-hover:bg-clip-text group-hover:text-transparent transition-all duration-300">
|
|
{post.metadata.title}
|
|
</h2>
|
|
<time dateTime={post.metadata.date} className="text-muted-foreground block mb-3">
|
|
{new Date(post.metadata.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</time>
|
|
<p className="text-muted-foreground line-clamp-2">{post.metadata.excerpt}</p>
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|