reui-blocks/blocks/blogpost2.tsx

import { ChevronRight } from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

interface Blogpost2Props {
  className?: string;
}

const Blogpost2 = ({ className }: Blogpost2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="relative flex flex-col justify-between gap-10 lg:flex-row">
          <aside className="top-10 h-fit flex-shrink-0 text-start lg:sticky lg:w-[300px] xl:w-[400px]">
            <a
              className="mb-5 flex items-center gap-1 text-muted-foreground hover:text-primary"
              href="#"
            >
              <ChevronRight className="h-full w-4 rtl:rotate-180" />
              بازگشت به خانه
            </a>
            <h1 className="mb-5 text-3xl font-bold text-balance lg:text-xl">
              ۱۰ اصل برای ساخت سیستم طراحی در پروژه‌های بزرگ
                                      </h1>
            <div className="flex gap-3">
              <Avatar className="size-7 rounded-full">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-1.webp"
                  alt="تصویر نویسنده"
                />
              </Avatar>
              <div>
                <h2 className="font-semibold">سارا احمدی</h2>
                <p className="text-xs text-muted-foreground">۲ روز پیش</p>
              </div>
            </div>
          </aside>

          <article>
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تصویر شاخص مطلب"
              className="mt-0 mb-8 aspect-video w-full rounded-lg object-cover"
            />
            <div className="prose dark:prose-invert">
              <p>
                در پروژه‌های بزرگ، داشتن یک سیستم طراحی یکپارچه استاندارد از ناهماهنگی رابط کاربری جلوگیری کرده و همکاری تیم را ساده‌تر می‌کند.
                                            </p>
              <h2>جمع‌بندی</h2>
              <p>
                برای شروع کافی است{" "}
                <a href="#">یک ساختار مناسب</a> را برای پروژه خود انتخاب کنید و به‌مرور توسعه دهید.
                                            </p>
              <blockquote>
                «رابط کاربری خوب فقط زیبا نیست؛ استفاده از آن باید ساده، سریع و لذت‌بخش باشد.»
                                            </blockquote>
              <h3>اصول کلیدی</h3>
              <p>
                برای پیاده‌سازی موفق سیستم طراحی، این اصول را رعایت کنید:
              </p>
              <ul>
                <li>طراحی سیستم منسجم</li>
                <li>کامپوننت‌های قابل استفاده مجدد</li>
                <li>مستندسازی استاندارد</li>
              </ul>
              <p>
                با رعایت این اصول، توسعه پروژه سریع‌تر، نگهداری آن ساده‌تر و تجربه کاربران نیز بهتر خواهد بود.
                                            </p>
              <h3>کتابخانه کامپوننت مرکزی</h3>
              <p>
                کامپوننت‌های مشترک را در یک کتابخانه مرکزی نگهداری کنید تا همه اعضای تیم از نسخه‌ای واحد استفاده کنند.
                                            </p>
              <p>
                استفاده از توکن‌های طراحی برای رنگ، فاصله و تایپوگرافی، هماهنگی کل محصول را تضمین می‌کند.
                                            </p>
              <h3>بهترین روش‌ها</h3>
              <p>
                استفاده از سیستم طراحی، نام‌گذاری استاندارد و مستندسازی کامپوننت‌ها کیفیت توسعه را در پروژه‌های بزرگ افزایش می‌دهد.
                                            </p>
              <div>
                <table>
                  <thead>
                    <tr>
                      <th>تعداد کامپوننت</th>
                      <th>زمان توسعه</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{(24).toLocaleString("fa-IR")}</td>
                      <td>{(6).toLocaleString("fa-IR")} هفته</td>
                    </tr>
                    <tr className="m-0 border-t p-0 even:bg-muted">
                      <td>{(68).toLocaleString("fa-IR")}</td>
                      <td>{(3).toLocaleString("fa-IR")} هفته</td>
                    </tr>
                    <tr className="m-0 border-t p-0 even:bg-muted">
                      <td>{(120).toLocaleString("fa-IR")}</td>
                      <td>{(1).toLocaleString("fa-IR")} هفته</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
                                            </p>
              <p>
                یک سیستم طراحی موفق، سرعت توسعه را افزایش می‌دهد و تجربه‌ای یکپارچه برای کاربران ایجاد می‌کند.
                                            </p>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
};

export { Blogpost2 };