65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { m } from 'motion/react';
|
|
import type { PostMeta } from '@/lib/posts';
|
|
|
|
const tagToClientSlug = (tag: string): string =>
|
|
tag
|
|
.normalize('NFKD')
|
|
.toLowerCase()
|
|
.replace(/[\u0300-\u036f]/g, '')
|
|
.replace(/\+/g, ' plus ')
|
|
.replace(/#/g, ' sharp ')
|
|
.replace(/[\\/]+/g, ' ')
|
|
.replace(/[^\p{L}\p{N}]+/gu, '-')
|
|
.replace(/-{2,}/g, '-')
|
|
.replace(/^-|-$/g, '');
|
|
|
|
export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0, coverImage }: PostMeta & { index?: number }) {
|
|
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="group relative scroll-mt-20 rounded-xl border border-border bg-canvas p-6 transition-all hover:border-border/80 hover:shadow-card"
|
|
>
|
|
<Link href={`/posts/${slug}/`} className="block">
|
|
{coverImage && (
|
|
<div className="mb-4 overflow-hidden rounded-lg">
|
|
<img
|
|
src={coverImage}
|
|
alt={`Cover image for ${title}`}
|
|
className="w-full h-40 object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
|
|
<time className="font-mono" dateTime={date}>{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
|
|
{author && <span className="text-ink-soft/70">·</span>}
|
|
{author && <span>{author}</span>}
|
|
{readingTime && <span className="text-ink-soft/70">·</span>}
|
|
{readingTime && <span className="font-mono">{readingTime} min read</span>}
|
|
</div>
|
|
<h3 className="heading-md text-ink mt-0 mb-3 group-hover:text-accent transition-colors">
|
|
{title}
|
|
</h3>
|
|
{excerpt && (
|
|
<p className="text-ink-soft leading-relaxed mt-3 text-sm">{excerpt}</p>
|
|
)}
|
|
</Link>
|
|
{tags && tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 mt-3">
|
|
{tags.slice(0, 3).map((tag) => (
|
|
<Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
|
|
{tag}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</m.article>
|
|
);
|
|
}
|