reui-blocks/blocks/content3.tsx

"use client";

import { Lightbulb } from "lucide-react";
import { useEffect, useRef, useState } from "react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Content3Props {
  className?: string;
}

const lastUpdatedLabel = new Intl.DateTimeFormat("fa-IR", {
  year: "numeric",
  month: "long",
  day: "numeric",
}).format(new Date("2024-04-15"));

const Content3 = ({ className }: Content3Props) => {
  const [activeHeadings, setActiveHeadings] = useState<string[]>([]);
  const sectionRefs = useRef<Record<string, HTMLElement>>({});

  useEffect(() => {
    const sections = Object.keys(sectionRefs.current);

    const observerCallback = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        const id = entry.target.id;

        if (entry.isIntersecting) {
          setActiveHeadings((prev) =>
            prev.includes(id) ? prev : [...prev, id],
          );
        } else {
          setActiveHeadings((prev) => prev.filter((heading) => heading !== id));
        }
      });
    };

    let observer: IntersectionObserver | null = new IntersectionObserver(
      observerCallback,
      {
        root: null,
        rootMargin: "0px",
        threshold: 1,
      },
    );

    sections.forEach((sectionId) => {
      const element = sectionRefs.current[sectionId];
      if (element) {
        observer?.observe(element);
      }
    });

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

  const addSectionRef = (id: string, ref: HTMLElement | null) => {
    if (ref) {
      sectionRefs.current[id] = ref;
    }
  };
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">خانه</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">وبلاگ</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>باغبانی شهری</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <h1 className="mt-10 text-start text-xl font-bold text-balance md:text-2xll lg:text-2xll">
          راهنمای کامل باغبانی شهری در فضاهای کوچک
                          </h1>
        <p className="mt-5 max-w-2xl text-start text-xl font-medium text-balance">
          یاد بگیرید چگونه با کمترین فضا و امکانات، یک باغچه خانگی زیبا، کاربردی و پربازده ایجاد کنید.
                          </p>
        <div className="mt-8 flex items-center gap-3">
          <Button size="lg">مطالعه راهنما</Button>
          <Button variant="outline" size="lg">
            مشاهده آموزش‌ها
                                </Button>
        </div>
        <div className="relative mt-16 grid gap-10 lg:mt-28 lg:grid-cols-5">
          <aside className="top-10 flex h-fit w-full max-w-56 flex-col gap-5 text-start lg:sticky">
            <div>
              <h2 className="font-semibold">موضوعات</h2>
              <ul className="mt-2 flex flex-col gap-2">
                <li>
                  <p className="text-sm text-muted-foreground">باغچه گلدانی</p>
                </li>
                <li>
                  <p className="text-sm text-muted-foreground">
                    سیستم‌های عمودی
                  </p>
                </li>
              </ul>
            </div>
            <div>
              <h2 className="font-semibold">آخرین به‌روزرسانی</h2>
              <time
                dateTime="2024-04-15"
                className="text-sm text-muted-foreground"
              >
                {lastUpdatedLabel}
              </time>
            </div>
          </aside>
          <div className="gap-6 lg:col-span-3">
            <div className="max-w-prose lg:mx-auto">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="تصویر نمونه"
                className="aspect-video rounded-2xl border border-border object-cover"
              />
              <div className="prose mt-12 text-start dark:prose-invert prose-h3:mt-14 prose-h3:scroll-mt-14 prose-h3:text-lg">
                <h2 className="text-xl font-semibold">راهنمای مبتدیان</h2>
                <h3
                  id="heading1"
                  ref={(ref) => addSectionRef("heading1", ref)}
                  className="text-xl font-semibold"
                >
                  نمای کلی
                </h3>
                <p>
                  با انتخاب گیاهان مناسب، مدیریت نور و آبیاری و استفاده بهینه از فضا، می‌توانید حتی در یک بالکن کوچک نیز باغچه‌ای سالم و پربار داشته باشید.
                                                  </p>
                <h3 id="heading2" ref={(ref) => addSectionRef("heading2", ref)}>
                  شروع کار
                </h3>
                <p>
                  قبل از شروع، محل مناسب، میزان نور، نوع خاک و برنامه آبیاری را مشخص کنید تا گیاهان از همان ابتدا شرایط رشد مطلوبی داشته باشند.
                                                  </p>
                <ul>
                  <li>
                    لوازم پایه برای باغچه اولیه:
                    <ul>
                      <li>
                        <code>گلدان</code> با سوراخ زهکشی مناسب
                      </li>
                      <li>
                        <code>خاک</code> مخصوص کاشت در گلدان
                      </li>
                    </ul>
                  </li>
                  <li>
                    شرایط نوری مناسب{" "}
                    <a href="#">مشاهده راهنمای نور</a>
                  </li>
                  <li>برنامه و روش‌های منظم آبیاری</li>
                  <li>بافت باکیفیت با مواد مغذی متعادل</li>
                </ul>

                <h3 id="heading3" ref={(ref) => addSectionRef("heading3", ref)}>
                  انتخاب گیاهان
                </h3>
                <p>
                  انتخاب گیاه متناسب با میزان نور، دمای محیط و فضای در دسترس، مهم‌ترین عامل موفقیت در باغبانی خانگی است.
                                                  </p>
                <div>
                  <table>
                    <thead>
                      <tr>
                        <th>شرایط نور</th>
                        <th>گیاهان پیشنهادی</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>آفتاب کامل</td>
                        <td>گوجه‌فرنگی، فلفل، ریحان</td>
                      </tr>
                      <tr className="m-0 border-t p-0 even:bg-muted">
                        <td>آفتاب جزئی</td>
                        <td>کاهو، کلم پیچ، نعنا</td>
                      </tr>
                      <tr className="m-0 border-t p-0 even:bg-muted">
                        <td>سایه</td>
                        <td>سرخس، هاستا، ایمپاتیانس</td>
                      </tr>
                      <tr className="m-0 border-t p-0 even:bg-muted">
                        <td>نور غیرمستقیم</td>
                        <td>ارکیده، لیلی صلح</td>
                      </tr>
                      <tr className="m-0 border-t p-0 even:bg-muted">
                        <td>نور کم</td>
                        <td>سانسوریا، گیاه دعا</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <p>
                  هماهنگی نیاز نوری گیاه با محل نگهداری، رشد سالم‌تر، گل‌دهی بهتر و محصول بیشتر را به همراه خواهد داشت.
                                                  </p>
                <Alert>
                  <Lightbulb className="h-4 w-4" />
                  <AlertTitle>نکته حرفه‌ای!</AlertTitle>
                  <AlertDescription>
                    گیاهانی با نیاز آبی مشابه را در کنار یکدیگر قرار دهید تا برنامه آبیاری ساده‌تر و احتمال آسیب به ریشه‌ها کمتر شود.
                                                        </AlertDescription>
                </Alert>

                <h3 id="heading4" ref={(ref) => addSectionRef("heading4", ref)}>
                  راه‌حل‌های عمودی
                </h3>
                <p>
                  اگر فضای کافی روی زمین ندارید، از دیوارها و سازه‌های عمودی برای افزایش ظرفیت کاشت استفاده کنید.{" "}
                  <a href="#">تکنیک‌های باغبانی عمودی</a> به شما کمک می‌کند بدون اشغال فضای بیشتر، تعداد گیاهان قابل کشت را چند برابر افزایش دهید.
                                                  </p>
                <blockquote>
                  «بزرگ‌ترین محدودیت در باغبانی شهری فضا نیست  تخیل است»،
                  می‌گوید ماریا چن، کشاورز شهری نامدار.
                </blockquote>
                <p>
                  با توجه به فضای در دسترس، این گزینه‌های عمودی را در نظر
                  بگیرید:
                </p>
                <ul>
                  <li>گلدان‌های دیواری جیبی: مناسب برای گیاهان دارویی</li>
                  <li>استند طبقه‌ای: ایده‌آل برای گلدان‌های کوچک</li>
                  <li>
                    خرک برای گیاهان رونده: عالی برای لوبیا، نخود و خیار
                  </li>
                </ul>
                <p>
                  با رعایت این اصول، حتی کوچک‌ترین فضاهای شهری نیز می‌توانند به باغچه‌ای سرسبز، زیبا و پربازده تبدیل شوند.
                                                  </p>
              </div>
            </div>
          </div>
          <nav
            className="sticky top-10 hidden h-fit lg:block"
            aria-label="فهرست مطالب"
          >
            <p className="text-sm text-muted-foreground">در این صفحه</p>
            <ul className="mt-1.5 text-xs text-muted-foreground">
              <li>
                <a
                  className={cn(
                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
                    activeHeadings.includes("heading1")
                      ? "border-primary font-medium text-primary"
                      : "text-muted-foreground hover:text-primary",
                  )}
                  href="#heading1"
                >
                  نمای کلی
                </a>
              </li>
              <li>
                <a
                  className={cn(
                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
                    activeHeadings.includes("heading2")
                      ? "border-primary font-medium text-primary"
                      : "text-muted-foreground hover:text-primary",
                  )}
                  href="#heading2"
                >
                  شروع کار
                </a>
              </li>
              <li>
                <a
                  className={cn(
                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
                    activeHeadings.includes("heading3")
                      ? "border-primary font-medium text-primary"
                      : "text-muted-foreground hover:text-primary",
                  )}
                  href="#heading3"
                >
                  انتخاب گیاهان
                </a>
              </li>
              <li>
                <a
                  className={cn(
                    "block border-s border-border py-1 ps-2.5 transition-colors duration-200",
                    activeHeadings.includes("heading4")
                      ? "border-primary font-medium text-primary"
                      : "text-muted-foreground hover:text-primary",
                  )}
                  href="#heading4"
                >
                  راه‌حل‌های عمودی
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
  );
};

export { Content3 };