reui-blocks/blocks/feature126.tsx

"use client";

import { MoveRight } from "lucide-react";
import { useState } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const tabsData = [
  {
    id: 1,
    title: "نقش و دسترسی",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-1.svg",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
  },
  {
    id: 2,
    title: "چک‌لیست تحویل",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-2.svg",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
  },
  {
    id: 3,
    title: "گزارش پیشرفت",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-3.svg",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
  },
  {
    id: 4,
    title: "برد Kanban",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-4.svg",
    description:
      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
  },
  {
    id: 5,
    title: "تقویم تیمی",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-5.svg",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
  },
  {
    id: 6,
    title: "اشتراک فایل",
    imageSrc: "/block-media/shadcnblocks/block/placeholder-6.svg",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
  },
];

interface Feature126Props {
  className?: string;
}

const Feature126 = ({ className }: Feature126Props) => {
  const [activeTabId, setActiveTabId] = useState<number | null>(null);
  const [activeImage, setActiveImage] = useState<string>(tabsData[0].imageSrc);
  const activeTab =
    tabsData.find((tab) => tab.imageSrc === activeImage) ?? tabsData[0];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <span className="text-sm text-muted-foreground">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</span>
        <h2 className="mt-4 mb-5 text-start text-3xl font-extrabold">
          همکاری از راه دور را ساده کنید
        </h2>
        <div className="mb-20 flex flex-col items-start gap-1 md:flex-row md:items-center md:gap-8">
          <a
            href="#"
            className="group flex items-center gap-2 text-muted-foreground hover:cursor-pointer"
          >
            وظایف، فایل‌ها و گفتگوها در یک محیط کاری متمرکز می‌شود. تیم‌ها کمتر در پیگیری وضعیت وقت می‌گذارند و بیشتر روی تحویل تمرکز می‌کنند.
            <span className="transform transition-transform duration-300 group-hover:translate-x-2 rtl:group-hover:-translate-x-2">
              <MoveRight className="size-4 rtl:rotate-180" />
            </span>
          </a>
          <a
            href="#"
            className="group flex items-center gap-2 text-muted-foreground hover:cursor-pointer"
          >
            نمای Kanban و Timeline به مدیران کمک می‌کند ظرفیت تیم را ببینند و اولویت‌ها را به‌موقع تنظیم کنند.
            <span className="transform transition-transform duration-300 group-hover:translate-x-2 rtl:group-hover:-translate-x-2">
              <MoveRight className="size-4 rtl:rotate-180" />
            </span>
          </a>
        </div>

        <div className="mb-12 flex w-full items-center justify-between gap-28">
          <div className="w-full md:max-w-[400px]">
            <Accordion type="single" className="w-full" defaultValue="item-1">
              {tabsData.map((tab) => (
                <AccordionItem
                  key={tab.id}
                  value={`item-${tab.id}`}
                  className={cn(
                    "border-t-2 border-b-0 px-2 transition hover:bg-accent",
                    tab.id === activeTabId && "border-foreground",
                  )}
                >
                  <AccordionTrigger
                    onClick={() => {
                      setActiveImage(tab.imageSrc);
                      setActiveTabId(tab.id);
                    }}
                    className="cursor-pointer py-5 text-start no-underline! transition"
                  >
                    <h6
                      className={cn(
                        "text-xl font-semibold",
                        tab.id === activeTabId
                          ? "text-foreground"
                          : "text-muted-foreground",
                      )}
                    >
                      {tab.title}
                    </h6>
                  </AccordionTrigger>
                  <AccordionContent>
                    <p className="mt-3 text-start text-muted-foreground">
                      {tab.description}
                    </p>
                    <div className="mt-4 md:hidden">
                      <img
                        src={tab.imageSrc}
                        alt={`نمای ${tab.title}`}
                        className="h-full max-h-80 w-full rounded-md object-cover"
                      />
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
          <div className="relative m-auto hidden w-[calc(100%-100px)] max-w-[1266px] overflow-hidden md:block">
            <div className="absolute inset-x-0 bottom-0 z-2 h-[100px] bg-[linear-gradient(to_top,white_0%,rgba(255,255,255,0)_100%)]" />
            <img
              src={activeImage}
              alt={`نمای ${activeTab.title}`}
              className="max-h-[490px] w-full rounded-md object-cover transition-opacity duration-300"
            />
          </div>
        </div>

        <Button variant="outline">مشاهده همه</Button>
      </div>
    </section>
  );
};

export { Feature126 };