reui-blocks/blocks/blogpost1.tsx

import { Lightbulb } from "lucide-react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

interface Blogpost1Props {
  className?: string;
  title?: string;
  author?: {
    name: string;
    website: string;
    websiteName: string;
    image: string;
  };
  image?: string;
  pubDate?: Date;
  description?: string;
}

const formatPersianDate = (date: Date) =>
  new Intl.DateTimeFormat("fa-IR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);

const Blogpost1 = ({
  className,
  title = "طراحی سریع‌تر وب‌سایت با ری یو آی",
  author = {
    name: "علی رضایی",
    website: "https://www.ShadcnBlocks",
    websiteName: "ShadcnBlocks",
    image: "/block-media/shadcnblocks/block/avatar-2.webp",
  },
  image = "/block-media/shadcnblocks/block/placeholder-1.svg",
  pubDate = new Date(),
  description =
    "راهنمای گام‌به‌گام ساخت وبلاگ مدرن و واکنش‌گرا با رابط کاربری و استایل‌دهی مدرن.",
}: Blogpost1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 text-center">
          <h1 className="max-w-3xl text-2xll font-semibold text-pretty md:text-2xll">
            {title}
          </h1>
          <h3 className="max-w-3xl text-lg text-muted-foreground md:text-xl">
            {description}
          </h3>
          <div className="flex flex-col items-center gap-1 text-sm md:flex-row md:gap-2 md:text-base">
            <div className="flex items-center gap-2">
              <Avatar className="h-8 w-8 border">
                <AvatarImage src={author.image} />
                <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <span className="font-semibold">{author.name}</span>
            </div>
            <span className="text-muted-foreground">
              مالک{" "}
              <a
                href={author.website}
                className="font-semibold text-foreground hover:underline"
              >
                {author.websiteName}
              </a>
            </span>
            <span className="text-muted-foreground">
              منتشر شده در {formatPersianDate(pubDate)}
            </span>
          </div>
          <img
            src={image}
            alt="تصویر شاخص مطلب"
            className="mt-4 mb-8 aspect-video w-full rounded-lg border object-cover"
          />
        </div>
      </div>
      <div className="container">
        <div className="mx-auto prose max-w-3xl dark:prose-invert">
          <h2 className="text-3xl font-extrabold">راهنمای طراحی رابط کاربری مدرن با رابط کاربری</h2>
          <p className="mt-2 text-lg text-muted-foreground">
            طراحی رابط کاربری مدرن تنها به ظاهر زیبا محدود نمی‌شود. استفاده از کامپوننت‌های قابل استفاده مجدد و رعایت اصول تجربه کاربری، توسعه محصولات باکیفیت را ساده‌تر می‌کند.
                                </p>

          <h2>چرا معماری کامپوننت‌محور؟</h2>
          <p>
            معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
                                </p>
          <Alert>
            <Lightbulb className="h-4 w-4" />
            <AlertTitle>نکته مهم</AlertTitle>
            <AlertDescription>
              پیش از شروع توسعه، ساختار طراحی، رنگ‌ها و کامپوننت‌های پایه را مشخص کنید تا محصولی یکپارچه داشته باشید.
                                      </AlertDescription>
          </Alert>
          <h2>بهترین روش‌ها</h2>
          <p>
            استفاده از سیستم طراحی، نام‌گذاری استاندارد و مستندسازی کامپوننت‌ها کیفیت توسعه را در پروژه‌های بزرگ افزایش می‌دهد.
                                </p>
          <div>
            <table>
              <thead>
                <tr>
                  <th>تعداد لید</th>
                  <th>نرخ تبدیل</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{(120).toLocaleString("fa-IR")}</td>
                  <td>{(8).toLocaleString("fa-IR")}٪</td>
                </tr>
                <tr className="m-0 border-t p-0 even:bg-muted">
                  <td>{(340).toLocaleString("fa-IR")}</td>
                  <td>{(14).toLocaleString("fa-IR")}٪</td>
                </tr>
                <tr className="m-0 border-t p-0 even:bg-muted">
                  <td>{(520).toLocaleString("fa-IR")}</td>
                  <td>{(22).toLocaleString("fa-IR")}٪</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p>
            معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
                                </p>

          <h2>جمع‌بندی</h2>

          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="داشبورد تحلیل نرخ تبدیل"
            className="my-8 aspect-video w-full rounded-md object-cover"
          />
          <p>
            برای شروع کافی است{" "}
            <a href="#">یک ساختار مناسب</a> را برای پروژه خود انتخاب کنید و به‌مرور توسعه دهید.
                                </p>
          <blockquote>
            «رابط کاربری خوب فقط زیبا نیست؛ استفاده از آن باید ساده، سریع و لذت‌بخش باشد.»
                                </blockquote>
          <p>
            برای بهبود نرخ تبدیل، این سه اصل را در اولویت قرار دهید:
          </p>
          <ul>
            <li>طراحی سیستم منسجم</li>
            <li>کامپوننت‌های قابل استفاده مجدد</li>
            <li>مستندسازی استاندارد</li>
          </ul>
          <p>
            با رعایت این اصول، توسعه پروژه سریع‌تر، نگهداری آن ساده‌تر و تجربه کاربران نیز بهتر خواهد بود.
                                </p>
        </div>
      </div>
    </section>
  );
};

export { Blogpost1 };