89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const data = [
|
|
{
|
|
id: 1,
|
|
title: "شروع کار با توسعه وب مدرن",
|
|
description:
|
|
"ابزارها و فریم‌ورک‌های ضروری توسعه وب مدرن را بشناسید. فناوری‌های جدید، بهترین روش‌ها و تکنیک‌های بهینه‌سازی گردش کار برای ساخت اپلیکیشن‌های پایدار.",
|
|
date: "۲۵ اسفند ۱۴۲",
|
|
category: "توسعه وب",
|
|
link: "#",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "درک اصول طراحی فرانت‌اند",
|
|
description:
|
|
"اصول بنیادی طراحی و توسعه فرانت‌اند را بررسی کنید. چیدمان واکنش‌گرا، الگوهای رابط کاربری، استانداردهای دسترس‌پذیری و ساخت تجربه‌های جذاب.",
|
|
date: "۲۲ اسفند ۱۴۲",
|
|
category: "فرانت‌اند",
|
|
link: "#",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "راهنمای اصول توسعه سمت سرور",
|
|
description:
|
|
"مفاهیم اصلی توسعه بک‌اند از طراحی پایگاه داده و معماری اتصال هوشمند تا مدیریت سرور را بیاموزید. سیستم‌های امن، کارآمد و مقیاس‌پذیر بسازید.",
|
|
date: "۱۸ اسفند ۱۴۲",
|
|
category: "سمت سرور",
|
|
link: "#",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "مفاهیم پیشرفته برنامه‌نویسی برنامه‌نویسی وب",
|
|
description:
|
|
"به مفاهیم پیشرفته برنامه‌نویسی وب از برنامه‌نویسی ناهمگام و الگوهای طراحی تا ویژگی‌های ES6+ بپردازید. کدی تمیز، قابل نگهداری و کارآمد بنویسید.",
|
|
date: "۱۵ اسفند ۱۴۲",
|
|
category: "فرانت‌اند",
|
|
link: "#",
|
|
},
|
|
];
|
|
|
|
interface Blog19Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Blog19 = ({ className }: Blog19Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mb-8 flex flex-wrap items-center justify-between gap-1">
|
|
<h1 className="text-start text-xl font-semibold md:text-xl">
|
|
مطالب مرتبط
|
|
</h1>
|
|
<Button
|
|
variant="outline"
|
|
className="md:h-10 md:px-4 md:py-2"
|
|
size="sm"
|
|
>
|
|
مشاهده همه مطالب
|
|
</Button>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10">
|
|
{data.map((item) => (
|
|
<a
|
|
key={item.id}
|
|
href={item.link}
|
|
className="flex flex-col gap-2 text-start"
|
|
>
|
|
<span className="text-sm font-medium text-muted-foreground">
|
|
{item.category}
|
|
</span>
|
|
<h3 className="mb-1 text-lg font-semibold">{item.title}</h3>
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
<span className="text-sm font-medium text-muted-foreground">
|
|
{item.date}
|
|
</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blog19 };
|