reui-blocks/blocks/gallery3.tsx

"use client";

import { ArrowLeft, ArrowRight } from "lucide-react";
import { useEffect, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import type { CarouselApi } from "@/components/ui/carousel";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

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

interface Gallery3Props {
  className?: string;
}

const Gallery3 = ({ className }: Gallery3Props) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);
  useEffect(() => {
    if (!carouselApi) {
      return;
    }
    const updateSelection = () => {
      setCanScrollPrev(carouselApi.canScrollPrev());
      setCanScrollNext(carouselApi.canScrollNext());
    };
    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">
        <div className="mb-8 flex items-end justify-between md:mb-14 lg:mb-16">
          <h2 className="text-start text-3xl font-medium tracking-tight md:text-xl lg:text-2xll">
            مطالعات موردی
          </h2>
          <div className="flex shrink-0 gap-2">
            <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>
        <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="max-w-[320px] basis-auto ps-4 pe-0 lg:max-w-[360px]"
              >
                <a
                  href={item.href}
                  className="group flex flex-col justify-between rounded-xl bg-muted p-6 text-start"
                >
                  <div>
                    <div className="flex aspect-3/2 overflow-clip rounded-xl">
                      <div className="flex-1">
                        <div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
                          <img
                            src={item.image}
                            alt={item.title}
                            className="h-full w-full object-cover object-center"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="mt-6">
                    <Badge>{item.label}</Badge>
                  </div>
                  <div className="mb-2 line-clamp-3 pt-4 text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-xl">
                    {item.title}
                  </div>
                  <div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
                    {item.description}
                  </div>
                  <div className="flex items-center text-sm">
                    بیشتر بخوانید{" "}
                    <ArrowRight className="ms-2 size-5 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
                  </div>
                </a>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>
      </div>
    </section>
  );
};

export { Gallery3 };