reui-blocks/blocks/gallery6.tsx

"use client";

import { ArrowLeft, ArrowRight, ArrowUpRight } 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 { cn } from "@/lib/utils";

interface GalleryItem {
  id: string;
  title: string;
  summary: string;
  url: string;
  image: string;
}

interface Gallery6Props {
  heading?: string;
  demoUrl?: string;
  items?: GalleryItem[];
  className?: string;
}

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

const Gallery6 = ({
  heading = "گالری",
  demoUrl = "#",
  items = DEFAULT_ITEMS,
  className,
}: Gallery6Props) => {
  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 flex-col justify-between md:mb-14 md:flex-row md:items-end lg:mb-16">
          <div className="text-start">
            <h2 className="mb-3 text-3xl font-semibold md:mb-4 md:text-xl lg:mb-6">
              {heading}
            </h2>
            <a
              href={demoUrl}
              className="group flex items-center gap-1 text-sm font-medium md:text-base lg:text-lg"
            >
              رزرو دمو
              <ArrowUpRight className="size-4 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 rtl:group-hover:translate-y-1" />
            </a>
          </div>
          <div className="mt-8 flex shrink-0 items-center justify-start gap-2">
            <Button
              size="icon"
              variant="outline"
              onClick={() => {
                carouselApi?.scrollPrev();
              }}
              disabled={!canScrollPrev}
              className="disabled:pointer-events-auto"
            >
              <ArrowRight className="size-5" />
              <span className="sr-only">اسلاید قبلی</span>
            </Button>
            <Button
              size="icon"
              variant="outline"
              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,
              },
            },
          }}
          className="relative w-full max-w-full"
        >
          <CarouselContent className="hide-scrollbar -ms-4 me-0 w-full max-w-full">
            {items.map((item) => (
              <CarouselItem
                key={item.id}
                className="basis-auto ps-4 pe-0 md:max-w-[452px]"
              >
                <a
                  href={item.url}
                  className="group flex flex-col justify-between 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="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.summary}
                  </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 { Gallery6 };