reui-blocks/blocks/gallery1.tsx

"use client";

import { ArrowUpRight, Plus } from "lucide-react";
import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const data = [
  {
    id: "item-1",
    title: "طراحی هویت بصری",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
    company: "شرکت نوآور",
    badges: ["تجاری", "برندینگ"],
  },
  {
    id: "item-2",
    title: "بازطراحی وب‌سایت",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
    company: "استارتاپ آلفا",
    badges: ["طراحی رابط کاربری", "توسعه وب"],
  },
  {
    id: "item-3",
    title: "راه‌اندازی فروشگاه آنلاین",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
    company: "برند پارس",
    badges: ["فروشگاهی", "چند پلتفرمی"],
  },
];

interface Gallery1Props {
  className?: string;
}

const Gallery1 = ({ className }: Gallery1Props) => {
  const [selection, setSelection] = useState(data[0].id);
  return (
    <section dir="rtl" lang="fa" className={cn("w-full max-w-full py-32", className)}>
      <div className="mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8">
        <div
          dir="ltr"
          className="mx-auto flex w-full max-w-full flex-col gap-5 lg:h-[420px] lg:flex-row lg:items-stretch"
        >
          {data.map((item) => (
            <div
              key={item.id}
              data-state={selection === item.id ? "open" : "closed"}
              className={cn(
                "group w-full min-w-0",
                "max-md:h-[200px]",
                "md:max-lg:min-h-[220px] md:max-lg:flex-1 md:max-lg:aspect-[1336/420]",
                "lg:h-full lg:transform-gpu lg:transition-[flex-grow] lg:duration-500",
                'lg:data-[state="closed"]:flex-[1_1_0%]',
                'lg:data-[state="open"]:flex-[3_1_0%]',
              )}
              onMouseEnter={() => {
                setSelection(item.id);
              }}
            >
              <a
                href={item.href}
                className="relative block h-full min-h-[200px] w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card md:min-h-[220px] lg:min-h-0"
              >
                <div className='pointer-events-none absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm'>
                  <div className="absolute top-[calc(25%+40px)] left-[50%] aspect-square h-[calc(50%+40px)] max-lg:left-[calc(50%+40px)]">
                    <div className="h-full w-full overflow-clip rounded-xl">
                      <img
                        src={item.image}
                        alt={item.title}
                        className="h-full w-full object-cover object-center"
                      />
                    </div>
                  </div>
                  <div className="absolute inset-y-[25%] right-[50%] hidden aspect-[389/420] h-[50%] items-center justify-center lg:flex">
                    <img
                      src={item.logo}
                      alt={item.company}
                      className="h-8 invert"
                    />
                  </div>
                  <div className="absolute top-[50%] left-[50%] hidden size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-accent lg:flex">
                    <Plus className="size-8 text-accent-foreground" />
                  </div>
                  <div className="absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" />
                </div>
                <div
                  dir="rtl"
                  className="relative z-10 flex h-full min-h-[200px] flex-col justify-between gap-4 md:absolute md:inset-0 md:min-h-0 md:max-lg:left-[50%] md:max-lg:w-[50%]"
                >
                  <div className='flex h-[80px] items-center gap-2 p-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0'>
                    {item.badges.map((badge) => (
                      <Badge key={badge} variant="secondary">
                        {badge}
                      </Badge>
                    ))}
                  </div>
                  <div className='flex flex-col gap-2 p-4 text-start transition-all delay-200 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0'>
                    <div className="lg:hidden">
                      <img
                        src={item.logo}
                        alt={item.company}
                        className="h-5 invert lg:h-6"
                      />
                    </div>
                    <div className="flex items-center justify-between gap-2">
                      <div className="text-base font-medium lg:text-lg">
                        {item.title}
                      </div>
                      <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-background text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10">
                        <ArrowUpRight className="size-4 rotate-180 lg:size-5" />
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Gallery1 };