127 lines
4.9 KiB
TypeScript
127 lines
4.9 KiB
TypeScript
import { ArrowUpRightIcon } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Blog29Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Blog29 = ({ className }: Blog29Props) => {
|
|
const blogPosts = [
|
|
{
|
|
href: "#",
|
|
date: "۲۵ اسفند ۱۴۲",
|
|
title: "ساخت سیستم طراحی با ری یو آی",
|
|
content:
|
|
"بیاموزید چگونه با کامپوننت‌های ری یو آی یک سیستم طراحی مقیاس‌پذیر بسازید. ترکیب کامپوننت‌ها، تم‌سازی و بهترین روش‌های حفظ یکنواختی در اپلیکیشن را بررسی می‌کنیم. قدرت primitiveهای کتابخانه پایه را با کدبیسی تمیز و قابل نگهداری به کار بگیرید.",
|
|
tags: [
|
|
"سیستم طراحی",
|
|
"Shadcn UI",
|
|
"React",
|
|
"Tailwind CSS",
|
|
"توسعه رابط کاربری",
|
|
],
|
|
},
|
|
{
|
|
href: "#",
|
|
date: "۲۰ اسفند ۱۴۲",
|
|
title: "ظهور کامپوننت‌های Headless رابط کاربری",
|
|
content:
|
|
"مزایای کامپوننت‌های headless و تأثیر آن‌ها بر توسعه وب را بررسی کنید. کتابخانه‌های محبوب را مقایسه می‌کنیم، ملاحظات دسترس‌پذیری را مطرح می‌کنیم و نحوه ساخت کامپوننت‌های انعطاف‌پذیر و بدون استایل پیش‌فرض را نشان می‌دهیم.",
|
|
tags: [
|
|
"Headless UI",
|
|
"دسترس‌پذیری",
|
|
"معماری کامپوننت",
|
|
"React",
|
|
"توسعه وب",
|
|
],
|
|
},
|
|
{
|
|
href: "#",
|
|
date: "۱۵ اسفند ۱۴۲",
|
|
title: "بهینه‌سازی کتابخانه کامپوننت برای کارایی",
|
|
content:
|
|
"تکنیک‌های ساخت کتابخانه کامپوننت پرکارایی و مقیاس‌پذیر را کشف کنید. از تقسیم هوشمند بار و tree shaking تا کاهش حجم بسته و بارگذاری هوشمند بدون قربانی کردن قابلیت‌ها، تجربه‌ای روان ارائه دهید.",
|
|
tags: [
|
|
"کارایی",
|
|
"حجم بسته",
|
|
"Code Splitting",
|
|
"React",
|
|
"کارایی وب",
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("bg-background py-16", className)}
|
|
>
|
|
<div className="container">
|
|
<h1 className="mb-10 px-6 text-start text-xl font-bold tracking-tighter text-foreground sm:text-2xll">
|
|
وبلاگ
|
|
</h1>
|
|
|
|
<section className="mt-10 space-y-6 md:mt-18">
|
|
{blogPosts.map((post, index) => (
|
|
<React.Fragment key={post.title}>
|
|
<Card className="border-none shadow-none">
|
|
<CardContent>
|
|
<div className="relative w-full text-start">
|
|
<p className="text-sm tracking-tight text-muted-foreground">
|
|
{post.date}
|
|
</p>
|
|
|
|
<h2 className="mt-2 text-lg font-medium tracking-tight text-foreground md:text-xl">
|
|
{post.title}
|
|
</h2>
|
|
|
|
<p className="md:text-md mt-4 text-sm text-muted-foreground md:pe-24 xl:pe-32">
|
|
{post.content}
|
|
</p>
|
|
|
|
<div className="mt-4 flex w-9/10 flex-wrap items-center gap-2">
|
|
{post.tags.map((tag) => (
|
|
<Badge
|
|
key={tag}
|
|
variant="secondary"
|
|
className="h-6 rounded-md"
|
|
>
|
|
<span className="text-md font-medium text-muted-foreground">
|
|
{tag}
|
|
</span>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<a href={post.href}>
|
|
<Button
|
|
variant="secondary"
|
|
className="absolute -bottom-1 -end-3 flex h-10 w-10 items-center justify-center rounded-full transition-all ease-in-out hover:rotate-45 md:bottom-14"
|
|
>
|
|
<ArrowUpRightIcon className="rtl:-rotate-90" />
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{index < blogPosts.length - 1 && (
|
|
<Separator className="h-px w-full" />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</section>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blog29 };
|