This repository has no description
Something went wrong. Try again.
2.9 kB · 72 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273import Link from 'next/link'import type { Post, Tag } from '@/payload-types'
interface PostPreviewProps { post: Post number: number className?: string}
function formatDate(dateStr: string): string { const date = new Date(dateStr) const y = date.getFullYear() const m = String(date.getMonth() + 1).padStart(2, '0') const d = String(date.getDate()).padStart(2, '0') return `${y}.${m}.${d}`}
export function PostPreview({ post, number, className }: PostPreviewProps) { const { title, slug, publishDate, excerpt, tags } = post const paddedNumber = String(number).padStart(3, '0') const formattedDate = publishDate ? formatDate(publishDate) : ''
// Only show tags when depth=1 returns Tag objects (not bare IDs) const resolvedTags: Tag[] = Array.isArray(tags) ? tags.filter((t): t is Tag => typeof t === 'object' && t !== null) : [] const topTags = resolvedTags.slice(0, 3)
return ( <li className={`border-hair group list-none border-b ${className ?? ''}`}> <Link href={`/blog/${slug}/`} className="text-ink grid grid-cols-1 items-start gap-2 py-6 transition-[padding] duration-200 ease-out hover:pl-3 sm:grid-cols-[200px_1fr_auto] sm:gap-8 sm:py-7" > <div className="text-ink-3 hidden flex-col gap-1.5 font-mono text-[11px] tracking-wider sm:flex"> <span className="text-ink font-serif text-[48px] leading-[0.9] font-normal tracking-[-0.02em]"> {paddedNumber} </span> <span className="text-ink-3 tabular-nums">{formattedDate}</span> </div>
<div className="max-w-[60ch]"> <div className="text-ink-3 mb-2.5 font-mono text-[11px] tracking-wider tabular-nums sm:hidden"> {formattedDate} </div> <h2 className="text-ink group-hover:decoration-ink-4 m-0 mb-2.5 font-serif text-[24px] leading-tight font-normal tracking-[-0.015em] group-hover:underline group-hover:underline-offset-4 sm:text-[32px]"> {title} </h2> {excerpt && ( <p className="text-ink-2 m-0 text-[15px] leading-[1.55] text-pretty">{excerpt}</p> )} {topTags.length > 0 && ( <div className="text-ink-3 mt-3 flex flex-wrap gap-2 font-mono text-[10px] tracking-[0.1em] uppercase"> {topTags.map((tag, i) => ( <span key={tag.id}> {i > 0 && <span className="text-ink-4 mr-2">·</span>} {tag.name} </span> ))} </div> )} </div>
<div className="tracking-mono text-ink-3 mt-2 text-left font-mono text-[11px] uppercase sm:mt-0 sm:min-w-[100px] sm:text-right"> <span className="text-ink ml-1.5 opacity-0 transition-opacity group-hover:opacity-100"> → </span> </div> </Link> </li> )}