41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { m } from "motion/react";
|
|
import type { PostMeta } from "@/lib/posts";
|
|
|
|
interface PostCardProps extends PostMeta {
|
|
index?: number;
|
|
}
|
|
|
|
export function PostCard({ slug, title, date, excerpt, index = 0, tags = [] }: PostCardProps) {
|
|
return (
|
|
<m.article
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.07 }}
|
|
viewport={{ once: true }}
|
|
className="scroll-mt-20"
|
|
>
|
|
<Link href={`/posts/${slug}/`} className="block">
|
|
<time className="font-mono text-sm text-ink-soft">{date}</time>
|
|
<h3 className="heading-md text-ink mt-1 mb-2 hover:text-accent transition-colors">
|
|
{title}
|
|
</h3>
|
|
{tags && tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1 mt-2">
|
|
{tags.slice(0, 3).map((tag) => (
|
|
<span key={tag} className="rounded bg-surface px-2 py-0.5 text-xs text-ink-soft">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
{excerpt && (
|
|
<p className="text-ink-soft leading-7 mt-2">{excerpt}</p>
|
|
)}
|
|
</Link>
|
|
</m.article>
|
|
);
|
|
}
|