reui-blocks/blocks/gallery24.tsx

"use client";

import { AnimatePresence, motion } from "framer-motion";
import { ArrowRight, ShoppingCart } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";

const IMAGES = [
  {
    id: 1,
    src: "/block-media/shadcnblocks/block/lummi/random5.jpeg",
    alt: "لباس‌های مجموعه تابستانه",
    title: "مجموعه",
    titleEmphasis: "تابستانه",
    code: "#۰۰۳۱",
  },
  {
    id: 2,
    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
    alt: "صحنه جشنواره موسیقی",
    title: "جشنواره",
    titleEmphasis: "موسیقی",
    code: "#۰۰۳۰",
  },
  {
    id: 3,
    src: "/block-media/shadcnblocks/block/lummi/random13.jpeg",
    alt: "لباس‌های ویژه فصل زمستان",
    title: "ویژه",
    titleEmphasis: "زمستان",
    code: "#۰۰۳۲",
  },
  {
    id: 4,
    src: "/block-media/shadcnblocks/block/lummi/random1.jpeg",
    alt: "لباس‌های نسخه بهاری",
    title: "نسخه",
    titleEmphasis: "بهاری",
    code: "#۰۰۳۳",
  },
  {
    id: 5,
    src: "/block-media/shadcnblocks/block/lummi/random2.jpeg",
    alt: "لباس‌های کلکسیون بهار",
    title: "کلکسیون",
    titleEmphasis: "بهار",
    code: "#۰۰۳۴",
  },
  {
    id: 6,
    src: "/block-media/shadcnblocks/block/lummi/random8.jpeg",
    alt: "لباس‌های خط تابستان",
    title: "خط",
    titleEmphasis: "تابستان",
    code: "#۰۰۳۵",
  },
  {
    id: 7,
    src: "/block-media/shadcnblocks/block/lummi/random9.jpeg",
    alt: "لباس‌های بوم نقاشی",
    title: "بوم",
    titleEmphasis: "نقاشی",
    code: "#۰۰۳۶",
  },
  {
    id: 8,
    src: "/block-media/shadcnblocks/block/lummi/random10.jpeg",
    alt: "لباس‌های شبکه طراحی",
    title: "شبکه",
    titleEmphasis: "طراحی",
    code: "#۰۰۳۷",
  },
];

interface Gallery24Props {
  className?: string;
}

const Gallery24 = ({ className }: Gallery24Props) => {
  const [activeImage, setActiveImage] = useState(0);
  const isMobile = useIsMobile();
  const visibleImages = IMAGES.slice(0, isMobile ? 4 : IMAGES.length);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="relative container overflow-x-clip">
        <div className="flex flex-col items-center justify-center">
          <h1 className="font-playfair max-w-xl text-center text-2xll tracking-tighter italic md:text-2xll">
            به حرف‌ها اعتماد نکنید
          </h1>
          <p className="text-md my-10 max-w-lg text-center opacity-50">
            ما نتیجه تحویل می‌دهیم. با تمرکز بر کیفیت و خلاقیت، محصولاتی
            می‌سازیم که تجربه واقعی مشتریان را بهبود می‌دهد.
          </p>

          <div className="flex w-full items-center justify-center gap-1">
            {visibleImages.map((image, index) => (
              <motion.div
                key={image.id}
                className="relative cursor-pointer overflow-hidden rounded-3xl border"
                initial={{ width: "2.5rem", height: "20rem" }}
                animate={{
                  width: activeImage === index ? "24rem" : "5rem",
                  height: activeImage === index ? "24rem" : "24rem",
                }}
                transition={{ duration: 0.3, ease: "easeInOut" }}
                onClick={() => setActiveImage(index)}
                onHoverStart={() => setActiveImage(index)}
              >
                <AnimatePresence>
                  {activeImage === index && (
                    <motion.div
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      className="absolute h-full w-full bg-gradient-to-t from-black/80 to-transparent"
                    />
                  )}
                </AnimatePresence>
                <AnimatePresence>
                  {activeImage === index && (
                    <motion.div
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      className="absolute flex h-full w-full flex-col items-start justify-end px-4 pb-10 text-start"
                    >
                      <p className="text-xs text-white/50">{image.code}</p>
                      <h3 className="w-42 text-3xl font-bold text-white lg:w-fit lg:whitespace-nowrap">
                        {image.title}
                        <span className="font-playfair italic">
                          {" "}
                          {image.titleEmphasis}
                        </span>
                      </h3>
                      <button
                        type="button"
                        className="mt-2 flex w-32 items-center justify-center gap-2 rounded-full bg-background px-4 py-2 text-xs whitespace-nowrap"
                      >
                        افزودن به سبد
                        <ShoppingCart size={14} />
                      </button>
                    </motion.div>
                  )}
                </AnimatePresence>
                <img
                  src={image.src}
                  className="size-full object-cover"
                  alt={image.alt}
                />
              </motion.div>
            ))}
          </div>
          <Button className="group mt-10 flex w-fit items-center justify-center gap-2 rounded-full tracking-tight">
            تماس با ما
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-0" />
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Gallery24 };