reui-blocks/blocks/timeline14.tsx

"use client";

import { useEffect, useRef, useState } from "react";

import { cn } from "@/lib/utils";

const formatStep = (value: number) =>
  value.toLocaleString("fa-IR", { minimumIntegerDigits: 2 });

const data = [
  {
    title: "آغاز شرکت",
    description:
      "سفر ما با یک ایده ساده شروع شد: فناوری را برای همه در دسترس کنیم. آنچه با تیمی کوچک سه توسعه‌دهنده در یک گاراژ آغاز شد، امروز پایه مأموریت ما برای در دسترس‌سازی توسعه نرم‌افزار است.",
    date: "۲۲۰",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    title: "عرضه اولین محصول",
    description:
      "پس از ماه‌ها توسعه، اولین محصول را به عموم عرضه کردیم. واکنش فراتر از انتظار بود  ۱۰ هزار کاربر در هفته اول ثبت‌نام کردند و اعتبار ایده ما را تأیید کرد.",
    date: "۲۲۱",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    title: "سرمایه‌گذاری مرحله اول",
    description:
      "راند سری A را با حمایت سرمایه‌گذاران برجسته که به مأموریت ما اعتقاد داشتند جمع کردیم. این سرمایه به ما اجازه داد تیم را گسترش دهیم، در تحقیق و توسعه سرمایه‌گذاری کنیم و برای گسترش بین‌المللی آماده شویم.",
    date: "۲۲۲",
    image:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    title: "گسترش جهانی",
    description:
      "دفاتر لندن، توکیو و سائوپائولو را باز کردیم و از استارتاپ محلی به شرکت فناوری جهانی تبدیل شدیم. پلتفرم ما اکنون بیش از ۵۰۰ هزار کاربر در ۵۰ کشور دارد.",
    date: "۲۲۳",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
];

interface Timeline14Props {
  className?: string;
}

const Timeline14 = ({ className }: Timeline14Props) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);

  useEffect(() => {
    const observerOptions = {
      root: null,
      rootMargin: "-50% 0px -50% 0px",
      threshold: 0,
    };

    const observerCallback = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const index = itemRefs.current.findIndex(
            (ref) => ref === entry.target,
          );
          if (index !== -1) {
            setActiveIndex(index);
          }
        }
      });
    };

    const observer = new IntersectionObserver(
      observerCallback,
      observerOptions,
    );

    itemRefs.current.forEach((ref) => {
      if (ref) {
        observer.observe(ref);
      }
    });

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

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container text-start">
        <h1 className="max-w-4xl text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
          <span className="font-medium">از استارتاپ تا پلتفرم جهانی</span>
          <br />
          <span className="text-muted-foreground">مسیر ما</span>
        </h1>
      </div>
      <div className="relative mt-16 lg:mt-28">
        <div className="sticky top-0 z-10 border-y bg-background py-3.5">
          <div className="container">
            <div className="flex justify-between gap-4 text-xl md:text-xl">
              <p className="font-mono text-muted-foreground">
                {formatStep(activeIndex + 1)}
              </p>
              <p className="font-mono">{data[activeIndex]?.date}</p>
            </div>
          </div>
        </div>
        <div className="container">
          <div className="flex flex-col">
            {data.map((item, index) => (
              <div
                key={index}
                ref={(el) => {
                  itemRefs.current[index] = el;
                }}
                className={cn(
                  "flex flex-col items-center gap-7 py-14 opacity-50 transition-opacity duration-300 md:flex-row md:gap-10 md:py-20",
                  index === activeIndex && "opacity-100",
                )}
              >
                <img
                  src={item.image}
                  alt={item.title}
                  className="aspect-[16/12] rounded-lg border object-cover md:w-1/3 md:max-w-[440px]"
                />
                <div className="text-start">
                  <h2 className="mb-3 text-xl font-medium md:mb-4 md:text-xl">
                    {item.title}
                  </h2>
                  <p className="text-muted-foreground md:text-balance">
                    {item.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Timeline14 };