reui-blocks/blocks/gallery19.tsx

"use client";

import "swiper/css";
import "swiper/css/effect-cards";
import "swiper/css/pagination";

import { AnimatePresence, motion } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { useEffect, useRef } from "react";
import type { Swiper as SwiperType } from "swiper";
import { Autoplay, EffectCards, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const IMAGES = [
  {
    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
    alt: "پرتره سارا احمدی در فضای شهری",
    name: "سارا احمدی",
    description:
      "مدیر محصول با تمرکز بر طراحی داشبورد و تجربه کاربری سامانه مدیریت ارتباط با مشتری.",
    link: "#",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
    alt: "پرتره مریم رضایی در نور طبیعی",
    name: "مریم رضایی",
    description:
      "تمرکز بر پرتره‌های طبیعی و احساسات خام در محیط‌های باز و آرام.",
    link: "#",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
    alt: "پرتره نیلوفر کریمی در استودیو",
    name: "نیلوفر کریمی",
    description:
      "آتلیه خلاق با نورپردازی دقیق برای پرتره‌های حرفه‌ای و مینیمال.",
    link: "#",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
    alt: "پرتره امیر حسینی در فضای باز",
    name: "امیر حسینی",
    description:
      "ثبت مقاطع طلایی روز در طبیعت با تاکید بر عمق میدان و رنگ.",
    link: "#",
  },
  {
    src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
    alt: "پرتره لیلا محمدی در فضای شهری",
    name: "علی حسنی ",
    description:
      "متخصص بازاریابی دیجیتال با تجربه در اتوماسیون و کمپین‌های ایمیل.",
    link: "#",
  }
];

const css = `
.mySwiper19 {
  width: 260px;
  height: 340px;
}

.mySwiper19 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
}

.mySwiper19 .swiper-pagination {
  bottom: -40px !important;
}

.mySwiper19 .swiper-pagination-bullet-active {
  background-color: var(--primary);
}
`;

interface Gallery19Props {
  className?: string;
}

const Gallery19 = ({ className }: Gallery19Props) => {
  const swiperRef = useRef<SwiperType | null>(null);

  useEffect(() => {
    swiperRef.current?.update();
  }, []);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden py-32", className)}
    >
      <style>{css}</style>
      <div className="container flex flex-col items-center gap-10">
        <AnimatePresence mode="popLayout">
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="relative w-full"
          >
            <Swiper
              dir="rtl"
              effect="cards"
              autoplay={{
                delay: 1000,
                disableOnInteraction: false,
              }}
              loop={true}
              grabCursor={true}
              modules={[EffectCards, Autoplay, Pagination]}
              pagination={{ clickable: true }}
              className="mySwiper19"
              onSwiper={(swiper) => {
                swiperRef.current = swiper;
              }}
            >
              {IMAGES.map((image, index) => {
                const [firstName, lastName] = image.name.split(" ");

                return (
                  <SwiperSlide
                    key={`${image.name}-${index}`}
                    className="relative"
                  >
                    <img
                      className="h-full w-full overflow-hidden rounded-3xl object-cover"
                      src={image.src}
                      alt={image.alt}
                    />
                    <div className="absolute h-full w-full bg-gradient-to-t from-black/80 to-transparent" />
                    <div className="absolute flex h-full w-full flex-col justify-end p-4 text-start">
                      <h3 className="text-xl font-bold text-white">
                        {firstName}
                        {lastName ? (
                          <span className="font-playfair italic">
                            {" "}
                            {lastName}
                          </span>
                        ) : null}
                      </h3>
                      <p className="text-xs text-white/50">
                        {image.description}
                      </p>
                      <Button
                        variant="secondary"
                        className="mt-4 w-fit rounded-full text-xs"
                        asChild
                      >
                        <a href={image.link}>
                          بیشتر بدانید
                          <ArrowRight
                            size={14}
                            className="ms-2 -rotate-45 rtl:rotate-[135deg]"
                          />
                        </a>
                      </Button>
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </motion.div>
        </AnimatePresence>
      </div>
    </section>
  );
};

export { Gallery19 };