55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
import { Placeholder } from "@/components/ui/Placeholder";
|
||
import { SectionTitle } from "@/components/ui/SectionTitle";
|
||
import { Carousel } from "@/components/ui/Carousel";
|
||
import { blogPosts } from "@/data/sample";
|
||
|
||
export function BlogCarousel() {
|
||
return (
|
||
<section className="py-10 md:py-14">
|
||
<div className="mx-auto max-w-7xl px-4">
|
||
<SectionTitle
|
||
title="آخرین مطالب وبلاگ"
|
||
enTitle="Latest Blog"
|
||
action="وبلاگ"
|
||
/>
|
||
<Carousel ariaLabel="کاروسل وبلاگ">
|
||
{blogPosts.map((post) => (
|
||
<article
|
||
key={post.id}
|
||
className="w-[280px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[300px]"
|
||
>
|
||
<Placeholder
|
||
src={post.image}
|
||
alt={post.title}
|
||
width="100%"
|
||
height="160px"
|
||
label="300×160"
|
||
className="w-full rounded-none border-0 border-b border-dashed"
|
||
/>
|
||
<div className="p-4">
|
||
<div className="mb-2 flex items-center gap-2 text-[11px] text-muted">
|
||
<span>{post.date}</span>
|
||
<span>•</span>
|
||
<span>{post.readTime} مطالعه</span>
|
||
</div>
|
||
<h3 className="mb-2 line-clamp-2 text-sm font-bold leading-relaxed">
|
||
{post.title}
|
||
</h3>
|
||
<p className="line-clamp-2 text-xs leading-relaxed text-muted">
|
||
{post.excerpt}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
className="mt-3 text-xs font-medium text-red transition-colors hover:text-red-dark"
|
||
>
|
||
ادامه مطلب ←
|
||
</button>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</Carousel>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|