reui-blocks/blocks/blogpost6.tsx

"use client";
import type { LucideIcon } from "lucide-react";
import { Linkedin, Twitter } from "lucide-react";
import { Fragment, useEffect, useState } from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface BreadcrumbItem {
  label: string;
  link: string;
}

interface BreadcrumbBlogProps {
  breadcrumb: Array<BreadcrumbItem>;
}

interface AuthorType {
  image?: string;
  name: string;
  job: string;
  description: string;
  socials: {
    icon: LucideIcon;
    url: string;
    label: string;
  }[];
}

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

const AUTHOR: AuthorType = {
  image: "/block-media/shadcnblocks/block/avatar-1.webp",
  name: "مهسا نوری",
  job: "مدیرعامل و هم‌بنیان‌گذار",
  description:
    "متخصص حوزه CRM و اتوماسیون فروش با بیش از ۱۰ سال تجربه در توسعه پلتفرم‌های بازاریابی دیجیتال برای کسب‌وکارهای B2B.",
  socials: [
    {
      icon: Twitter,
      url: "#",
      label: "توییتر",
    },
    {
      icon: Linkedin,
      url: "#",
      label: "لینکدین",
    },
  ],
};

const BREADCRUMB: Array<BreadcrumbItem> = [
  {
    label: "منابع",
    link: "#",
  },
  {
    label: "مقالات",
    link: "#",
  },
];

const SHARE_LINKS = [
  {
    icon: Twitter,
    url: "#",
    label: "اشتراک در توییتر",
  },
  {
    icon: Linkedin,
    url: "#",
    label: "اشتراک در لینکدین",
  },
];

const ARTICLE_DATE = formatPersianDate(new Date("2025-05-18"));
const ARTICLE_DURATION = "۱۰ دقیقه مطالعه";

interface Blogpost6Props {
  className?: string;
}

const Blogpost6 = ({ className }: Blogpost6Props) => {
  const [activeId, setActiveId] = useState<string | null>(null);

  useEffect(() => {
    const chapterIds = ["مقدمه", "انواع کامپوننت‌های رابط کاربری", "جمع‌بندی"];
    const headingElements = chapterIds
      .map((id) => document.getElementById(id))
      .filter(Boolean) as HTMLElement[];

    const observer = new window.IntersectionObserver(
      (entries) => {
        const visible = entries.find((entry) => entry.isIntersecting);
        if (visible) {
          setActiveId(visible.target.id);
        }
      },
      {
        rootMargin: "0px 0px -30% 0px",
        threshold: 0.1,
      },
    );

    headingElements.forEach((el) => observer.observe(el));

    return () => observer.disconnect();
  }, []);

  return (
    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
      <div className="bg-muted bg-[url('/block-media/shadcnblocks/block/patterns/dot-pattern-2.svg')] bg-[length:3.125rem_3.125rem] bg-repeat py-20">
        <div className="container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-end lg:justify-between">
          <div className="flex w-full flex-col items-center justify-center gap-12">
            <div className="flex w-full max-w-[36rem] flex-col items-center justify-center gap-8">
              <BreadcrumbBlog breadcrumb={BREADCRUMB} />
              <div className="flex w-full flex-col gap-5">
                <div className="flex items-center justify-center gap-2.5 text-sm font-medium text-foreground/60">
                  <div>{ARTICLE_DURATION}</div>
                  <div>|</div>
                  <div>{ARTICLE_DATE}</div>
                </div>
                <h1 className="text-center text-[2.5rem] leading-[1.2] font-semibold md:text-2xll lg:text-2xll">
                  راهنمای جامع انتخاب CRM برای تیم‌های فروش
                </h1>
                <p className="text-center text-xl leading-[1.4] font-semibold text-foreground">
                  پلتفرم‌های CRM پایه و اساس مدیریت مشتریان و افزایش فروش در کسب‌وکارهای مدرن هستند. در این مقاله با نقش، مزایا و مهم‌ترین قابلیت‌های آن‌ها آشنا می‌شوید.
                                                  </p>
                <div className="flex items-center justify-center gap-2.5">
                  {SHARE_LINKS.map((link, index) => (
                    <Button asChild key={`share-link-${index}`} size="icon">
                      <a href={link.url} aria-label={link.label}>
                        <link.icon />
                      </a>
                    </Button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="container pt-20">
        <div className="relative mx-auto flex w-full max-w-5xl items-start justify-between gap-20">
          <div className="top-20 flex-1 bg-background pb-10 text-start lg:sticky lg:pb-0">
            <div className="text-xl leading-snug font-medium">فهرست مطالب</div>
            <div className="flex flex-col gap-2 pt-2 ps-2">
              <a
                href="#heading-1"
                className={`block text-sm leading-normal font-medium text-muted-foreground transition duration-300 ${activeId === "heading-1" ? "lg:rounded-md lg:bg-muted lg:p-2 lg:font-bold lg:text-primary!" : "text-muted-foreground"}`}
              >
                نقش کامپوننت‌های رابط کاربری در توسعه
              </a>
              <a
                href="#heading-2"
                className={`block text-sm leading-normal font-medium text-muted-foreground transition duration-300 ${activeId === "heading-2" ? "lg:rounded-md lg:bg-muted lg:p-2 lg:font-bold lg:text-primary!" : "text-muted-foreground"}`}
              >
                انواع اصلی کامپوننت‌های رابط کاربری
              </a>
              <a
                href="#heading-3"
                className={`block text-sm leading-normal font-medium text-muted-foreground transition duration-300 ${activeId === "heading-3" ? "lg:rounded-md lg:bg-muted lg:p-2 lg:font-bold lg:text-primary!" : "text-muted-foreground"}`}
              >
                جمع‌بندی
                                            </a>
            </div>
          </div>

          <div className="flex w-full max-w-[40rem] flex-col gap-10">
            <Author author={AUTHOR} />
            <div className="prose dark:prose-invert">
              <h2>نکات کلیدی</h2>
              <p>
                • استفاده از CRM مناسب باعث افزایش سرعت فروش، کاهش زمان پیگیری و حفظ یکپارچگی داده‌های مشتریان می‌شود.
                                            </p>
              <p>
                • پلتفرم‌هایی مانند HubSpot، Salesforce و Zoho توسعه فرایندهای فروش استاندارد و قابل‌اندازه‌گیری را ساده‌تر می‌کنند.
                                            </p>
              <p>
                • اتوماسیون مبتنی بر CRM، نگهداری مشتریان، توسعه قابلیت‌های جدید و همکاری تیمی را آسان‌تر می‌کند.
                                            </p>

              <p>
                در چشم‌انداز در حال تحول توسعه وب مدرن، کامپوننت‌های رابط کاربری به
                ابزارهای ضروری برای ساخت رابط‌های کاربرپسند تبدیل شده‌اند. این
                کامپوننت‌ها  از دکمه‌های ساده تا جداول داده پیچیده 
                بلاک‌های سازنده‌ای هستند که تجربه کلی کاربر را شکل می‌دهند. با
                ماژولار کردن رابط به بخش‌های کوچک‌تر و قابل‌مدیریت، کامپوننت‌های
                رابط کاربری نه‌تنها فرآیند توسعه را ساده می‌کنند، بلکه یکپارچگی طراحی
                در سراسر اپلیکیشن را نیز تقویت می‌کنند. با پیچیده‌تر شدن
                محصولات دیجیتال، نقش کامپوننت‌های رابط کاربری ساخت‌یافته در برآورده
                کردن انتظارات کاربر و حفظ کیفیت کد حتی مهم‌تر می‌شود.
              </p>
              <h2 id="heading-1" className="scroll-mt-24">
                نقش کامپوننت‌های رابط کاربری در توسعه
              </h2>
              <p>
                کامپوننت‌های رابط کاربری واحدهای مستقل عملکرد و نمایش هستند که اغلب برای
                استفاده مجدد در بخش‌های مختلف اپلیکیشن طراحی می‌شوند. با
                محصور کردن منطق و استایل، کامپوننت‌ها تکرار را کاهش می‌دهند
                و نگهداری کدبیس را بهبود می‌بخشند. برای مثال، یک کامپوننت
                دکمه می‌تواند با props یا استایل‌های مختلف بارها استفاده شود
                و ظاهر یکنواخت در کل اپلیکیشن را تضمین کند. این رویکرد
                ماژولار امکان توسعه موازی را نیز فراهم می‌کند؛ تیم‌ها می‌توانند
                روی کامپوننت‌های جداگانه کار کنند بدون اینکه مزاحم یکدیگر
                شوند.
              </p>
              <p>
                فریم‌ورک‌های محبوبی مانند رابط کاربری، چارچوب رابط و چارچوب رابط بر معماری
                مبتنی‌بر کامپوننت بنا شده‌اند و توسعه‌دهندگان را تشویق
                می‌کنند به‌جای صفحات یکپارچه، به بلاک‌های قابل‌استفاده‌مجدد
                فکر کنند. این تغییر نه‌تنها مقیاس‌پذیری را افزایش می‌دهد،
                بلکه تست و دیباگ را نیز ساده‌تر می‌کند. علاوه بر این،
                کتابخانه‌های رابط کاربری زیادی مانند کتابخانه رابط، کتابخانه رابط و کتابخانه پایه
                کامپوننت‌های ازپیش‌ساخته و دسترس‌پذیر ارائه می‌دهند که توسعه
                را تسریع و هماهنگی با سیستم‌های طراحی را تضمین می‌کنند. پذیرفتن
                کامپوننت‌ها به‌عنوان عناصر اصلی در معماری فرانت‌اند، منجر به
                سازمان‌دهی بهتر کد، نمونه‌سازی سریع‌تر و تجربه کاربری روان‌تر
                می‌شود.
              </p>
              <h2 id="heading-2" className="scroll-mt-24">
                انواع اصلی کامپوننت‌های رابط کاربری
              </h2>
              <h3>۱ کامپوننت‌های ورودی</h3>
              <p>
                کامپوننت‌های ورودی عناصر تعاملی هستند که به کاربر اجازه
                می‌دهند اطلاعات وارد کند. این‌ها شامل فیلدهای متنی،
                چک‌باکس‌ها، دکمه‌های رادیویی، اسلایدرها و آپلود فایل
                می‌شوند. آن‌ها در فرم‌ها و تنظیمات کاربر ضروری‌اند و جمع‌آوری
                داده و شخصی‌سازی را ممکن می‌سازند.                 یک کامپوننت ورودی خوش‌طراح اعتبارسنجی را مدیریت می‌کند، بازخورد
                نمایش می‌دهد و تجربه‌ای یکپارچه در دستگاه‌ها و صفحه‌خوان‌ها
                فراهم می‌کند تا فراگیری و کاربردپذیری تضمین شود.
              </p>
              <a href="#">ادامه مطالعه</a>
              <div className="w-full max-w-[40rem] overflow-hidden">
                <img
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="نمونه کامپوننت‌های ورودی"
                  className="size-full object-cover object-center"
                />
              </div>
              <h3>۲ کامپوننت‌های ناوبری</h3>
              <p>
                کامپوننت‌های ناوبری کاربر را در ساختار اپلیکیشن هدایت
                می‌کنند. این‌ها شامل نوار بالا، منوی کناری، breadcrumb،
                تب‌ها و صفحه‌بندی می‌شوند. ناوبری مؤثر کشف‌پذیری را بهبود
                می‌بخشد و به کاربر کمک می‌کند محتوای موردنیاز را بدون اصطکاک
                پیدا کند. طراحی خوب ناوبری جریان کاربر، دسترس‌پذیری (مانند
                ناوبری با کیبورد و برچسب‌های برچسب دسترس‌پذیری) و واکنش‌گرایی را در نظر
                می‌گیرد تا رابط در اندازه‌های مختلف صفحه شهودی و سازگار
                بماند.
              </p>
              <div className="w-full max-w-[40rem] overflow-hidden">
                <img
                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
                  alt="نمونه کامپوننت‌های ناوبری"
                  className="size-full object-cover object-center"
                />
              </div>
              <h3>۳. کامپوننت‌های بازخورد</h3>
              <p>
                کامپوننت‌های بازخورد نشانه‌های بصری یا متنی در پاسخ به
                اقدامات کاربر ارائه می‌دهند. نمونه‌ها شامل مودال‌ها،
                اعلان‌های toast، نوار پیشرفت و tooltipها هستند. این عناصر
                کاربر را از موفقیت یا شکست عملیات‌ها مطلع می‌کنند یا او را
                به اقدام لازم هشدار می‌دهند. آن‌ها تعامل را تقویت و سردرگمی
                را  به‌ویژه در عملیات ناهمگام مانند ارسال فرم یا آپلود
                فایل  کاهش می‌دهند.
              </p>
              <div className="w-full max-w-[40rem] overflow-hidden">
                <img
                  src="/block-media/shadcnblocks/block/placeholder-3.svg"
                  alt="نمونه کامپوننت‌های بازخورد"
                  className="size-full object-cover object-center"
                />
              </div>
              <h3>۴. کامپوننت‌های چیدمان</h3>
              <p>
                کامپوننت‌های چیدمان محتوا را به‌صورت بصری در صفحه سازماندهی
                می‌کنند. نمونه‌های رایج شامل containerها، سطرها، ستون‌ها و
                سیستم‌های grid هستند. این کامپوننت‌ها ساختار صفحه را تعریف
                و فاصله‌گذاری، تراز و واکنش‌گرایی عناصر فرزند را کنترل
                می‌کنند. یک سیستم چیدمان قوی یکنواختی در سلسله‌مراتب بصری
                را تضمین و از مقیاس‌پذیری با پیچیده‌تر شدن اپلیکیشن
                پشتیبانی می‌کند.
              </p>
              <div className="w-full max-w-[40rem] overflow-hidden">
                <img
                  src="/block-media/shadcnblocks/block/placeholder-4.svg"
                  alt="نمونه کامپوننت‌های چیدمان"
                  className="size-full object-cover object-center"
                />
              </div>
              <h2 id="heading-3" className="scroll-mt-24">
                جمع‌بندی
                                            </h2>
              <p>
                تسلط بر استفاده از کامپوننت‌های رابط کاربری گامی کلیدی به سوی ساخت
                اپلیکیشن‌های وب قابل‌اعتماد، مقیاس‌پذیر و از نظر بصری
                یکپارچه است. با شکستن رابط‌ها به بخش‌های کوچک‌تر،
                توسعه‌دهندگان انعطاف بیشتری به‌دست می‌آورند، استفاده مجدد را
                تشویق می‌کنند و احتمال خطا را کاهش می‌دهند. کامپوننت‌های رابط کاربری
                همچنین شکاف بین طراحی و توسعه را پر می‌کنند و جریان کاری
                مشارکتی و کارآمدتری ایجاد می‌کنند که به هر دو گروه
                توسعه‌دهندگان و کاربران نهایی سود می‌رساند.
              </p>
            </div>

            <div className="prose rounded-lg bg-muted p-5 dark:prose-invert [&>h2]:mt-0">
              <h2>نتیجه‌گیری</h2>
              <p>
                کامپوننت‌های رابط کاربری فراتر از عناصر بصری هستند  آن‌ها دارایی‌های
                راهبردی در جعبه‌ابزار سازنده محصول مدرن‌اند. وقتی با دقت
                طراحی و به‌درستی استفاده شوند، به تیم‌ها قدرت می‌دهند
                رابط‌های باکیفیت را با سرعت، یکپارچگی و اطمینان تحویل دهند.
                با ادامه تحول توسعه فرانت‌اند، سرمایه‌گذاری روی کامپوننت‌های
                رابط کاربری قابل‌استفاده‌مجدد، دسترس‌پذیر و مستندسازی‌شده برای ساخت
                محصولات دیجیتال کاربرمحور و قابل‌نگهداری همچنان ضروری
                خواهد ماند.
              </p>
            </div>

            <div className="flex flex-col gap-4 rounded-lg bg-muted p-5 text-start">
              <Author author={AUTHOR} />
              <p>{AUTHOR.description}</p>
              <div className="flex items-center gap-2.5">
                {AUTHOR.socials.map((link, index) => (
                  <Button asChild key={`author-socials-${index}`} size="icon">
                    <a href={link.url} aria-label={link.label}>
                      <link.icon />
                    </a>
                  </Button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Author = ({ author }: { author: AuthorType }) => {
  return (
    <div className="flex items-center gap-2.5 text-start">
      <Avatar className="size-12 border">
        <AvatarImage src={author.image} alt={author.name} />
        <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>
      </Avatar>
      <div>
        <div className="text-sm leading-normal font-normal">{author.name}</div>
        <div className="text-sm leading-normal font-normal text-muted-foreground">
          {author.job}
        </div>
      </div>
    </div>
  );
};

const BreadcrumbBlog = ({ breadcrumb }: BreadcrumbBlogProps) => {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        {breadcrumb.map((item, i) => {
          return (
            <Fragment key={`${item.label}`}>
              <BreadcrumbItem>
                <BreadcrumbLink href={item.link}>{item.label}</BreadcrumbLink>
              </BreadcrumbItem>
              {i < breadcrumb.length - 1 ? (
                <BreadcrumbSeparator>/</BreadcrumbSeparator>
              ) : null}
            </Fragment>
          );
        })}
      </BreadcrumbList>
    </Breadcrumb>
  );
};

export { Blogpost6 };