reui-blocks/blocks/gallery8.tsx

"use client";

import { ArrowLeft, ArrowRight, MoveRight } from "lucide-react";
import { Fragment, 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 { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const resources = [
  {
    title: "شروع کار با قالب‌ها",
    category: "راهنما",
    link: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    title: "قیمت‌گذاری و پلن‌های قالب",
    category: "قیمت‌گذاری",
    link: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    title: "معرفی سازنده قالب جدید ما",
    category: "خبر",
    link: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    title: "الگوهای طراحی پیشرفته: ساخت قالب‌های واکنش‌گرا برای ۲۲۵",
    category: "آموزش",
    link: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
  {
    title: "راهنمای جامع سفارشی‌سازی قالب",
    category: "کتاب الکترونیک",
    link: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-5.svg",
  },
  {
    title: "گزارش‌های موفقیت قالب: مرور یک سال",
    category: "وبلاگ",
    link: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-6.svg",
  },
];

interface Gallery8Props {
  className?: string;
}

const Gallery8 = ({ className }: Gallery8Props) => {
  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("overflow-hidden py-32", className)}
    >
      <div className="container">
        <h2 className="text-start text-xl font-bold text-pretty">
          شروع ساخت با مجموعه قالب‌های ما
        </h2>
        <Carousel
          dir="rtl"
          setApi={setCarouselApi}
          opts={{
            align: "start",
            direction: "rtl",
          }}
        >
          <div className="mt-6 grid gap-x-14 gap-y-10 lg:mt-16 lg:grid-cols-3">
            <div className="order-3 flex flex-col gap-6 text-start lg:order-none">
              {resources.slice(0, 3).map((resource, idx) => (
                <Fragment key={idx}>
                  <div className="flex flex-col gap-1">
                    <div className="font-mono text-sm text-muted-foreground uppercase">
                      {resource.category}
                    </div>
                    <a
                      href={resource.link}
                      className="group flex items-center gap-2 font-semibold"
                    >
                      {resource.title}
                      <MoveRight className="mt-0.5 size-5 shrink-0 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
                    </a>
                  </div>
                  <Separator />
                </Fragment>
              ))}
              <a
                href="#"
                className="group flex items-center gap-2 font-semibold"
              >
                مشاهده همه منابع
                <MoveRight className="mt-0.5 size-5 transition-transform duration-300 group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
              </a>
            </div>
            <div className="order-1 lg:order-none lg:col-span-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_0_-100vw_-100vw)]">
              <CarouselContent className="me-0 ms-0 max-w-[min(calc(100vw-4rem),24rem)] select-none sm:max-w-96">
                {resources.map((item, idx) => (
                  <CarouselItem
                    className={cn(
                      "w-fit border-y border-s border-border ps-0 transition-colors duration-300 hover:bg-muted/50",
                      idx === resources.length - 1 && "border-e",
                    )}
                    key={idx}
                  >
                    <a href={item.link} className="block h-full text-start">
                      <img
                        src={item.image}
                        alt={item.title}
                        className="aspect-video object-cover"
                      />
                      <div className="px-6 py-8">
                        <div className="text-sm text-muted-foreground uppercase">
                          {item.category}
                        </div>
                        <h3 className="mt-2 text-xl font-semibold lg:text-xl">
                          {item.title}
                        </h3>
                      </div>
                    </a>
                  </CarouselItem>
                ))}
              </CarouselContent>
            </div>
            <div className="order-2 flex items-center gap-4 lg:order-none lg:col-start-2">
              <Button
                type="button"
                size="icon"
                variant="outline"
                className="static size-12 translate-none touch-manipulation"
                disabled={!canScrollPrev}
                onClick={() => carouselApi?.scrollPrev()}
              >
                <ArrowRight className="size-5" />
                <span className="sr-only">اسلاید قبلی</span>
              </Button>
              <Button
                type="button"
                size="icon"
                variant="outline"
                className="static size-12 translate-none touch-manipulation"
                disabled={!canScrollNext}
                onClick={() => carouselApi?.scrollNext()}
              >
                <ArrowLeft className="size-5" />
                <span className="sr-only">اسلاید بعدی</span>
              </Button>
            </div>
          </div>
        </Carousel>
      </div>
    </section>
  );
};

export { Gallery8 };