reui-blocks/blocks/projects12.tsx

"use client";

import {
  AnimatePresence,
  motion,
  useMotionValue,
  useSpring,
} from "framer-motion";
import { useCallback, useRef, useState } from "react";

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

const projects = [
  {
    title: "طراحی مقیاس‌پذیر",
    img: "/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg",
    year: "۱۴۰۴",
    type: "محصول",
  },
  {
    title: "رابط شهری رنگارنگ",
    img: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
    year: "۱۴۰۴",
    type: "اتوماسیون بازاریابی",
  },
  {
    title: "داشبورد مینیمال لوکس",
    img: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
    year: "۱۴۰۴",
    type: "رابط کاربری",
  },
  {
    title: "صفحه اصلی مینیمال",
    img: "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
    year: "۱۴۰۴",
    type: "طراحی محصول",
  },
  {
    title: "معماری فرانت‌اند",
    img: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
    year: "۱۴۰۴",
    type: "تم گرم و دنج",
  },
  {
    title: "کامپوننت در بستر واقعی",
    img: "/block-media/shadcnblocks/block/lummi/bw16.jpeg",
    year: "۱۴۰۴",
    type: "مودال تأیید با بلاک Dialog",
  },
];

interface Projects12Props {
  className?: string;
}

const Projects12 = ({ className }: Projects12Props) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [isHovering, setIsHovering] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const springX = useSpring(mouseX, {
    stiffness: 300,
    damping: 30,
    mass: 0.8,
  });
  const springY = useSpring(mouseY, {
    stiffness: 300,
    damping: 30,
    mass: 0.8,
  });

  const handleContainerMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      if (!containerRef.current) return;

      const containerRect = containerRef.current.getBoundingClientRect();
      const x = e.clientX - containerRect.left;
      const y = e.clientY - containerRect.top;

      mouseX.set(x - 50);
      mouseY.set(y + 30);
    },
    [mouseX, mouseY],
  );

  const handleProjectMouseEnter = useCallback((index: number) => {
    setHoveredIndex(index);
    setIsHovering(true);
  }, []);

  const handleContainerMouseLeave = useCallback(() => {
    setHoveredIndex(null);
    setIsHovering(false);
  }, []);

  return (
    <section dir="rtl" lang="fa" className={cn("py-20", className)}>
      <div className="container">
        <div className="mb-10 flex items-end justify-between text-start">
          <h2 className="text-2xl font-semibold">گالری استودیو</h2>
        </div>

        <div
          ref={containerRef}
          className="relative grid grid-cols-1 gap-x-6 gap-y-7 sm:grid-cols-2 lg:grid-cols-3"
          onMouseMove={handleContainerMouseMove}
          onMouseLeave={handleContainerMouseLeave}
        >
          {projects.map((project, index) => (
            <div key={index} className="group relative text-start">
              <div
                className="relative cursor-pointer overflow-hidden rounded-xl"
                onMouseEnter={() => handleProjectMouseEnter(index)}
              >
                <img
                  src={project.img}
                  alt={project.title}
                  className="h-[400px] w-full rounded-lg object-cover transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:scale-[1.05] group-hover:brightness-110"
                />

                <div className="absolute inset-0 rounded-lg bg-black/0 transition-all duration-500 group-hover:bg-black/10" />
              </div>

              <div className="mt-4 flex justify-between gap-0.5">
                <h3 className="text-sm leading-tight font-medium transition-colors duration-300 group-hover:text-neutral-800 md:text-base">
                  {project.title}
                </h3>
                <div className="flex flex-col items-end text-end">
                  <p className="text-sm text-neutral-600">{project.year}</p>
                  <p className="text-sm text-muted-foreground">
                    {project.type}
                  </p>
                </div>
              </div>
            </div>
          ))}

          <AnimatePresence>
            {isHovering && hoveredIndex !== null && (
              <motion.div
                style={{
                  x: springX,
                  y: springY,
                }}
                initial={{
                  opacity: 0,
                  scale: 0.8,
                }}
                animate={{
                  opacity: 1,
                  scale: 1,
                }}
                exit={{
                  opacity: 0,
                  scale: 0.8,
                }}
                transition={{
                  type: "spring",
                  stiffness: 400,
                  damping: 25,
                  mass: 0.5,
                }}
                className="pointer-events-none absolute top-0 left-0 z-[9999] select-none"
              >
                <div className="relative">
                  <div className="absolute inset-0 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/30 backdrop-blur-md" />

                  <div className="relative flex items-center gap-3 px-3 py-3 text-sm font-medium whitespace-nowrap text-white">
                    <span className="text-base">کاوش</span>
                    <div className="flex h-6 w-6 items-center justify-center rounded-full border border-white/30 bg-white/10">
                      <motion.span
                        animate={{ x: [0, 2, 0] }}
                        transition={{
                          duration: 2,
                          repeat: Number.POSITIVE_INFINITY,
                          ease: "easeInOut",
                        }}
                        className="inline-block text-xs rtl:rotate-180"
                      >
                        →
                      </motion.span>
                    </div>
                  </div>

                  <div className="absolute inset-0 scale-105 rounded-2xl bg-white/5 blur-sm" />
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </section>
  );
};

export { Projects12 };