reui-blocks/blocks/gallery32.tsx

"use client";

import { motion } from "framer-motion";
import React, { useRef, useState } from "react";

import { cn } from "@/lib/utils";

interface Gallery32Props {
  className?: string;
}

const Gallery32 = ({ className }: Gallery32Props) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const dragConstraintsRef = useRef<HTMLDivElement>(null);

  const images = [
    {
      className: "size-30 z-1 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
      alt: "",
    },
    {
      className:
        "size-30 z-1 absolute bottom-0 left-0 z-10 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
      alt: "",
    },
    {
      className:
        "size-45 z-1 bottom-1/6 left-1/9 absolute z-10 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
      alt: "",
    },
    {
      className:
        "size-30 z-1 bottom-3/5 left-15 absolute z-10 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
      alt: "",
    },
    {
      className:
        "size-34 z-1 left-1/5 absolute top-0 z-10 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
      alt: "",
    },
    {
      className:
        "size-30 z-1 absolute right-0 top-0 z-10 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img4.jpeg",
      alt: "",
    },
    {
      className:
        "size-34 z-1 top-1/6 absolute right-[15%] z-10 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
      alt: "",
    },
    {
      className:
        "size-45 z-1 absolute bottom-[10%] right-[5%] z-10 overflow-hidden rounded-2xl",
      src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
      alt: "",
    },
  ];

  return (
    <section
      className={cn(
        "relative w-full overflow-hidden bg-muted py-32",
        className,
      )}
    >
      <div className="relative container mx-auto min-h-112 w-full md:min-h-144">
        <div className="pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-5 lg:z-0">
          <motion.p
            initial={{ y: "50%", opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.2, ease: "easeOut" }}
            className="absolute top-0 left-1/2 max-w-sm -translate-x-[calc(50%-28px)] rounded-3xl bg-background p-5 text-right md:top-4"
            dir="rtl"
          >
            مجموعه گزیده‌ای از عکاسی‌های چشم‌نواز را کشف کنید؛ تصاویری که
            لحظاتی از زیبایی و الهام را از سراسر جهان ثبت کرده‌اند.
          </motion.p>
          <motion.p
            initial={{ y: "50%", opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            transition={{ duration: 0.2, ease: "easeOut" }}
            className="absolute bottom-0 left-1/5 max-w-sm translate-x-28 rounded-3xl bg-background p-5 text-right md:bottom-4"
            dir="rtl"
          >
            گالری ما را مرور کنید و میان تصاویری جستجو کنید که لحظات زیبایی
            و الهام را از نقاط مختلف جهان به تصویر کشیده‌اند.
          </motion.p>
        </div>
        <div
          ref={dragConstraintsRef}
          className="relative flex min-h-112 w-full scale-75 items-center justify-center overflow-hidden md:min-h-144 md:scale-100"
        >
          {images.map((image, index) => (
            <motion.div
              drag
              dragConstraints={dragConstraintsRef}
              dragElastic={0.1}
              key={index}
              initial={{ y: "50%", opacity: 0, scale: 0.8 }}
              whileInView={{ y: 0, opacity: 1, scale: 1 }}
              transition={{
                duration: 0.2,
                ease: "easeOut",
                delay: index * 0.1 + 0.5,
              }}
              animate={{
                filter:
                  hoveredIndex !== null && hoveredIndex !== index
                    ? "blur(10px)"
                    : "blur(0px)",
                scale: hoveredIndex === index ? 1.05 : 1,
                transition: {
                  duration: 0.3,
                  ease: "easeOut",
                  delay: 0,
                },
              }}
              onHoverStart={() => setHoveredIndex(index)}
              onHoverEnd={() => setHoveredIndex(null)}
              className={image.className}
            >
              <img
                src={image.src}
                alt={image.alt}
                className="pointer-events-none h-full w-full object-cover"
              />
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};
export { Gallery32 };