reui-blocks/blocks/gallery30.tsx

"use client";

import { motion } from "framer-motion";
import { useEffect, useMemo, useState } from "react";

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

interface GalleryImage {
  src: string;
  alt: string;
  className: string;
}

interface Gallery30Props {
  className?: string;
}

const IMAGES: GalleryImage[] = [
  {
    src: "/block-media/shadcnblocks/block/guri3/img2.jpeg",
    alt: "پرتره خلاقانه در فضای شهری",
    className:
      "md:w-50 size-47 rotate-7 md:rotate-0 z-1 absolute md:-left-10 md:bottom-1/4 lg:left-0 md:h-72",
  },
  {
    src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
    alt: "عکس هنری با نور طبیعی",
    className:
      "md:w-38 size-47 -rotate-7 md:rotate-0 z-1 md:left-1/5 md:h-45 absolute md:-top-10",
  },
  {
    src: "/block-media/shadcnblocks/block/guri3/img6.jpeg",
    alt: "ترکیب‌بندی مدرن در استودیو",
    className:
      "md:w-50 size-45 z-1 md:right-2/5 absolute md:-top-40 md:h-52",
  },
  {
    src: "/block-media/shadcnblocks/block/guri3/img5.jpeg",
    alt: "پرتره با پس‌زمینه مینیمال",
    className:
      "hidden md:block size-40 z-1 md:-top-42 md:h-42 absolute md:-right-10 md:w-60",
  },
  {
    src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    alt: "عکاسی فشن در فضای باز",
    className:
      "md:w-55 hidden md:block z-1 top-1/5 md:h-65 md:absolute -right-10 lg:right-28",
  },
  {
    src: "/block-media/shadcnblocks/block/guri3/img14.jpeg",
    alt: "صحنه خلاقانه با نورپردازی نرم",
    className:
      "md:w-50 hidden md:block z-1 md:h-78 md:absolute -bottom-5 -right-40",
  },
  {
    src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
    alt: "پرتره هنری با کنتراست بالا",
    className:
      "hidden md:block z-1 right-1/5 md:absolute -bottom-1/4 md:h-48 md:w-60",
  },
  {
    src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
    alt: "عکس تبلیغاتی با استایل مدرن",
    className:
      "hidden md:block z-1 right-3/5 -bottom-1/6 md:absolute md:h-48 md:w-60",
  },
];

const shuffleImages = (images: GalleryImage[]) =>
  [...images]
    .sort(() => Math.random() - 0.5)
    .map((image) => ({
      ...image,
      delay: Math.random() * 0.4,
    }));

const Gallery30 = ({ className }: Gallery30Props) => {
  const images = useMemo(() => IMAGES, []);
  const [shuffledImages, setShuffledImages] = useState(() =>
    shuffleImages(images),
  );

  useEffect(() => {
    setShuffledImages(shuffleImages(images));
  }, [images]);

  return (
    <section
      lang="fa"
      className={cn(
        "relative w-full overflow-x-clip py-32 md:min-h-screen",
        className,
      )}
    >
      <div className="relative container mx-auto min-h-112 w-full md:min-h-144">
        <div
          dir="rtl"
          className="absolute top-1/2 left-1/2 z-20 flex w-full max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5 px-4 text-center"
        >
          <h1 className="text-xl font-medium tracking-tighter lg:text-2xll">
            بلاک‌های اختصاصی ری یو آی
          </h1>
          <p className="text-sm text-muted-foreground/70 lg:text-base">
            مجموعه‌ای از بلاک‌های طراحی‌شده با دقت برای ساخت رابط‌های مدرن،
            سریع و چشم‌نواز. هر المان برای الهام و سرعت در پروژه‌های شما
            آماده شده است.
          </p>
        </div>
        <div dir="rtl" className="relative h-full min-h-112 w-full md:min-h-144">
          {shuffledImages.map((image) => (
            <motion.div
              key={image.src}
              className={cn(image.className)}
              drag
              initial={{ opacity: 0, scale: 0.8, y: 50 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              transition={{
                duration: 0.4,
                type: "spring",
                bounce: 0.2,
                delay: image.delay,
              }}
              whileDrag={{ zIndex: 20 }}
            >
              <img
                src={image.src}
                alt={image.alt}
                className="pointer-events-none h-full w-full cursor-grab object-cover shadow-lg active:cursor-grabbing"
              />
            </motion.div>
          ))}
        </div>
      </div>
      <Illustration />
    </section>
  );
};

const Illustration = () => {
  return (
    <div className="pointer-events-none absolute inset-0">
      <svg
        className="h-full w-full"
        viewBox="0 0 1920 1081"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="xMidYMid slice"
      >
        <rect
          x="-356.326"
          y="-222.305"
          width="1041.41"
          height="1041.41"
          rx="520.707"
          stroke="#D9D9D9"
        />
        <rect
          x="1362.49"
          y="391.957"
          width="1041.41"
          height="1041.41"
          rx="520.707"
          stroke="#D9D9D9"
        />
      </svg>
    </div>
  );
};

export { Gallery30 };