Initial Next.js clone of Pars Elevator (plift.ir).
RTL Meshkee storefront with home/about/contact/products/blog, API auth/contact/blog wiring, and SEO sitemap-config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { blogHref, formatFaDate } from "@/lib/format";
|
||||
import type { Blog } from "@/lib/types";
|
||||
|
||||
export function BlogCard({ blog }: { blog: Blog }) {
|
||||
const href = blogHref(blog);
|
||||
const date = formatFaDate(blog.publishedAt || blog.createdAt);
|
||||
|
||||
return (
|
||||
<article className="flex h-full flex-col overflow-hidden bg-white shadow-[0_12px_40px_rgba(0,0,0,0.06)]">
|
||||
<Link href={href} className="relative block aspect-[16/10] bg-[#eee]">
|
||||
{blog.titleImageUrl ? (
|
||||
<Image
|
||||
src={blog.titleImageUrl}
|
||||
alt={blog.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width:768px) 100vw, 33vw"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted">
|
||||
بدون تصویر
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
<div className="flex flex-1 flex-col p-6">
|
||||
{date && (
|
||||
<time className="mb-2 block text-xs text-[#A0A0A0]">{date}</time>
|
||||
)}
|
||||
<h3 className="mb-3 text-base font-semibold leading-7 text-dark">
|
||||
<Link href={href} className="transition hover:text-primary">
|
||||
{blog.title}
|
||||
</Link>
|
||||
</h3>
|
||||
{blog.abstract && (
|
||||
<p className="mb-5 line-clamp-3 flex-1 text-sm leading-7 text-muted text-justify">
|
||||
{blog.abstract}
|
||||
</p>
|
||||
)}
|
||||
<Link
|
||||
href={href}
|
||||
className="text-sm font-medium text-dark underline underline-offset-4 transition hover:text-primary"
|
||||
>
|
||||
بیشتر بخوانید
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user