66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { ImageIcon, User } from "lucide-react";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
import { getFeaturedImageUrl, type WpPost } from "@/lib/wp-api";
|
|
import { formatDateShamsi } from "@/lib/format-date";
|
|
|
|
function stripHtml(html: string): string {
|
|
return html.replace(/<[^>]*>/g, "").trim();
|
|
}
|
|
|
|
export function BlogPostCard({ post }: { post: WpPost }) {
|
|
const excerpt = stripHtml(post.excerpt.rendered) || stripHtml(post.content.rendered).slice(0, 160);
|
|
const modifiedDate = post.modified ? formatDateShamsi(post.modified) : null;
|
|
const authorName = post._embedded?.author?.[0]?.name ?? null;
|
|
const thumbnailUrl = getFeaturedImageUrl(post, "medium");
|
|
|
|
return (
|
|
<Link href={`/blog/${encodeURIComponent(post.slug)}`} className="block h-full">
|
|
<Card className="h-full overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg pt-0 gap-1">
|
|
{thumbnailUrl ? (
|
|
<div className="relative aspect-video w-full overflow-hidden bg-muted">
|
|
<Image
|
|
src={thumbnailUrl}
|
|
alt=""
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="relative flex aspect-video w-full items-center justify-center overflow-hidden bg-muted"
|
|
aria-hidden
|
|
>
|
|
<ImageIcon className="size-12 text-muted-foreground/50" />
|
|
</div>
|
|
)}
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-xl font-bold leading-tight line-clamp-2 mt-2">
|
|
{post.title.rendered}
|
|
</CardTitle>
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground bg-muted inline-flex p-1 rounded-sm">
|
|
{authorName && (
|
|
<span className="inline-flex flex-1 items-center gap-1.5">
|
|
<User className="size-3.5 shrink-0" aria-hidden />
|
|
{authorName}
|
|
</span>
|
|
)}
|
|
{modifiedDate && (
|
|
<time dateTime={post.modified}>
|
|
{modifiedDate}
|
|
</time>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-3">
|
|
{excerpt}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
);
|
|
}
|