reui-blocks/blocks/gallery5.tsx

"use client";

import {
  ArrowLeft,
  ArrowRight,
  CheckSquare,
  Clock,
  Focus,
  Target,
  Users,
} from "lucide-react";
import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import type { CarouselApi } from "@/components/ui/carousel";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";

const data = [
  {
    id: "item-1",
    title: "مدیریت وظایف",
    icon: CheckSquare,
    description:
      "وظایف خود را با رابط شهودی ما سازماندهی کنید. ایجاد، اولویت‌بندی و پیگیری پیشرفت را به‌سادگی انجام دهید؛ مهلت تعیین کنید، برچسب بزنید و دیگر مهلت مهمی را از دست ندهید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    id: "item-2",
    title: "ردیابی زمان",
    icon: Clock,
    description:
      "با تحلیل‌های دقیق ببینید زمان خود را چگونه می‌گذرانید. الگوهای بهره‌وری را شناسایی کنید، فعالیت‌های اتلاف‌زمان را حذف کنید و برنامه روزانه را برای حداکثر کارایی بهینه کنید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    id: "item-3",
    title: "همکاری تیمی",
    icon: Users,
    description:
      "با تیم خود در لحظه و بدون اصطکاک کار کنید. وظایف را به اشتراک بگذارید، از طریق چت یکپارچه گفتگو کنید و همه را با اهداف و نقاط عطف مشترک همسو نگه دارید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    id: "item-4",
    title: "پیگیری اهداف و عادت‌ها",
    icon: Target,
    description:
      "آرزوهای خود را با سیستم ساخت عادت ما به اهداف قابل دستیابی تبدیل کنید. پیشرفت را دنبال کنید، رکورد حفظ کنید و مسیر تغییر رفتار پایدار را دنبال کنید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    id: "item-5",
    title: "جلسات تمرکز",
    icon: Focus,
    description:
      "با تایمر تمرکز الهام‌گرفته از پومودورو، تمرکز خود را بالا ببرید. حواس‌پرتی‌ها را مسدود کنید، در حالت کار عمیق بمانید و بهره‌وری را با استراحت‌های لازم متعادل کنید.",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
];

interface Gallery5Props {
  className?: string;
}

const Gallery5 = ({ className }: Gallery5Props) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);
  const [selection, setSelection] = useState(0);

  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    carouselApi.scrollTo(selection);
  }, [carouselApi, selection]);

  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    const updateSelection = () => {
      setCanScrollPrev(carouselApi.canScrollPrev());
      setCanScrollNext(carouselApi.canScrollNext());
      setSelection(carouselApi.selectedScrollSnap());
    };
    updateSelection();
    carouselApi.on("select", updateSelection);
    return () => {
      carouselApi.off("select", updateSelection);
    };
  }, [carouselApi]);

  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    carouselApi.reInit();
  }, [carouselApi]);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mb-14 flex flex-col gap-16 lg:mb-16">
        <div className="text-start lg:max-w-lg">
          <h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-xl lg:mb-6">
            بهره‌وری خود را چند برابر کنید
          </h2>
          <p className="text-muted-foreground lg:text-lg">
            مجموعه ابزار بهره‌وری ما کمک می‌کند در زمان کمتری کار بیشتری
            انجام دهید. از مدیریت وظایف تا ساخت عادت، ابزارهای لازم برای
            بهینه‌سازی گردش کار و دستیابی به اهداف را در اختیار دارید.
          </p>
        </div>
        <div className="flex shrink-0 gap-2 md:hidden">
          <Button
            size="icon"
            variant="ghost"
            onClick={() => {
              carouselApi?.scrollPrev();
            }}
            disabled={!canScrollPrev}
            className="disabled:pointer-events-auto"
          >
            <ArrowRight className="size-5" />
            <span className="sr-only">اسلاید قبلی</span>
          </Button>
          <Button
            size="icon"
            variant="ghost"
            onClick={() => {
              carouselApi?.scrollNext();
            }}
            disabled={!canScrollNext}
            className="disabled:pointer-events-auto"
          >
            <ArrowLeft className="size-5" />
            <span className="sr-only">اسلاید بعدی</span>
          </Button>
        </div>
        <div className="hidden gap-4 text-center md:flex md:flex-wrap">
          <ToggleGroup
            type="single"
            variant="outline"
            size="lg"
            className="flex-wrap"
            value={data[selection].id}
            onValueChange={(newValue) => {
              if (newValue) {
                setSelection(data.findIndex((item) => item.id === newValue));
              }
            }}
          >
            {data.map((item) => {
              const Icon = item.icon;
              return (
                <ToggleGroupItem
                  key={item.id}
                  value={item.id}
                  className="flex flex-col items-center p-4 text-center"
                  aria-label={item.title}
                >
                  <Icon className="size-4" />
                </ToggleGroupItem>
              );
            })}
          </ToggleGroup>
        </div>
        <Carousel
          dir="rtl"
          setApi={setCarouselApi}
          opts={{
            align: "start",
            direction: "rtl",
            breakpoints: {
              "(max-width: 768px)": {
                dragFree: true,
              },
            },
          }}
        >
          <CarouselContent className="-ms-4 me-0">
            {data.map((item) => (
              <CarouselItem key={item.id} className="basis-full ps-4 pe-0">
                <a href={item.href} className="group rounded-xl">
                  <div className="flex flex-col overflow-clip rounded-xl border border-border md:col-span-2 md:grid md:grid-cols-2 md:gap-6 lg:gap-8">
                    <div className="md:order-2 md:min-h-96 lg:min-h-112 xl:min-h-128">
                      <img
                        src={item.image}
                        alt={item.title}
                        className="aspect-video h-full w-full object-cover object-center"
                      />
                    </div>
                    <div className="flex flex-col justify-center px-6 py-8 text-start md:order-1 md:px-8 md:py-10 lg:px-10 lg:py-12">
                      {(() => {
                        const Icon = item.icon;
                        return <Icon className="mb-4 size-6" />;
                      })()}
                      <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
                        {item.title}
                      </h3>
                      <p className="text-muted-foreground lg:text-lg">
                        {item.description}
                      </p>
                    </div>
                  </div>
                </a>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Gallery5 };