reui-blocks/blocks/gallery15.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";

interface DatItem {
  id: string;
  title: string;
  price: string;
  image: string;
  hoverImage: string;
  tag: string;
}

const DATA: DatItem[] = [
  {
    id: "1",
    title: "توسعه وب سفارشی",
    price: "۱٬۵۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
    tag: "راهکار سفارشی",
  },
  {
    id: "2",
    title: "توسعه اپلیکیشن موبایل",
    price: "۲٬۰۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
    tag: "موبایل اپل و موبایل اندروید",
  },
  {
    id: "3",
    title: "راهکارهای ابری",
    price: "۳٬۰۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-majMgWtrF48-unsplash.jpg",
    tag: "زیرساخت مقیاس‌پذیر",
  },
  {
    id: "4",
    title: "طراحی رابط کاربری/تجربه کاربری",
    price: "۱٬۲۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-6.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-xYFl3Q9am1E-unsplash.jpg",
    tag: "طراحی کاربرمحور",
  },
  {
    id: "5",
    title: "پلتفرم‌های فروشگاهی",
    price: "۲٬۵۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-9__Q24sJqKg-unsplash.jpg",
    tag: "خرید روان",
  },
  {
    id: "6",
    title: "هوش مصنوعی و یادگیری ماشین",
    price: "۵٬۰۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-5oYbG-sEImY-unsplash.jpg",
    tag: "خودکارسازی هوشمند",
  },
  {
    id: "7",
    title: "خدمات DevOps",
    price: "۲٬۸۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-duxeKbu9FDE-unsplash.jpg",
    tag: "گردش‌کار کارآمد",
  },
  {
    id: "8",
    title: "راهکارهای امنیت سایبری",
    price: "۴٬۰۰۰ ریال",
    image:
      "/block-media/shadcnblocks/block/placeholder-6.svg",
    hoverImage:
      "/block-media/shadcnblocks/block/photos/simone-hutsch-majMgWtrF48-unsplash.jpg",
    tag: "سیستم‌های امن",
  },
];

interface Gallery15Props {
  className?: string;
}

const Gallery15 = ({ className }: Gallery15Props) => {
  const [carouselApi, setCarouselApi] = useState<CarouselApi>();
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(true);
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    if (!carouselApi) {
      return;
    }

    const updateSelection = () => {
      setCanScrollPrev(carouselApi.canScrollPrev());
      setCanScrollNext(carouselApi.canScrollNext());
      setCurrentIndex(carouselApi.selectedScrollSnap());
    };

    updateSelection();
    carouselApi.on("select", updateSelection);

    return () => {
      carouselApi.off("select", updateSelection);
    };
  }, [carouselApi]);

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

  const progressWidth = 240;
  const progressIndicatorWidth = progressWidth / DATA.length;
  const progressOffset = currentIndex * progressIndicatorWidth;

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="px-4 lg:px-10">
        <div className="mb-6 flex flex-col justify-between md:flex-row md:items-end">
          <div className="text-start">
            <h2 className="text-3xl font-semibold md:text-xl">خدمات ما</h2>
          </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="rounded-full"
            >
              <ArrowRight className="size-5" />
              <span className="sr-only">اسلاید قبلی</span>
            </Button>
            <Button
              size="icon"
              variant="outline"
              onClick={() => carouselApi?.scrollNext()}
              disabled={!canScrollNext}
              className="rounded-full"
            >
              <ArrowLeft className="size-5" />
              <span className="sr-only">اسلاید بعدی</span>
            </Button>
          </div>
        </div>
      </div>

      <div className="relative w-full overflow-hidden">
        <Carousel
          dir="rtl"
          setApi={setCarouselApi}
          opts={{
            align: "start",
            direction: "rtl",
          }}
        >
          <CarouselContent className="-ms-4 me-0 px-4 pb-10 lg:px-10">
            {DATA.map((product) => (
              <CarouselItem
                key={product.id}
                className="min-w-[334px] flex-1 ps-4 pe-0"
              >
                <a
                  href="#"
                  className="group relative flex h-full flex-col items-start justify-start gap-2 text-start"
                >
                  <div className="w-full">
                    <div className="group relative z-10 overflow-hidden rounded-2xl">
                      <img
                        src={product.image}
                        alt={product.title}
                        className="aspect-3/4 h-full w-full object-cover transition-opacity duration-500 group-hover:opacity-0"
                      />
                      <img
                        src={product.hoverImage}
                        alt={product.title}
                        className="absolute start-0 top-0 z-10 aspect-3/4 h-full w-full rounded-2xl object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                      />

                      <Badge
                        className="absolute start-4 top-4 bg-background px-4 py-2"
                        variant="outline"
                      >
                        {product.tag}
                      </Badge>
                    </div>
                  </div>
                  <div className="flex flex-col gap-1">
                    <h3>{product.title}</h3>
                    <span>
                      شروع از <span>{product.price}</span>
                    </span>
                  </div>
                </a>
              </CarouselItem>
            ))}
          </CarouselContent>
        </Carousel>

        <div className="absolute bottom-0 start-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200 rtl:translate-x-1/2">
          <div
            className="absolute top-0 h-0.5 rounded bg-black transition-[inset-inline-start] duration-300 ease-out"
            style={{
              width: `${progressIndicatorWidth}px`,
              insetInlineStart: `${progressOffset}px`,
            }}
          />
        </div>
      </div>
    </section>
  );
};

export { Gallery15 };