"use client"; import React, { useState } from "react"; import { motion, LayoutGroup } from "framer-motion"; import { cn } from "@/lib/utils"; interface GalleryItem { id: string; title: string; subtitle: string; image: string; color: string; } const ITEMS: GalleryItem[] = [ { id: "grassy", title: "ارتفاعات", subtitle: "دشت طلایی زیر آسمان بلند", image: "/unsplash/1500648767791-00dcc994a43e.webp", color: "#84cc16", }, { id: "misty", title: "سرخ‌فام", subtitle: "شعلهٔ سرخ در کوهستان", image: "/unsplash/1501854140801-50d01698950b.webp", color: "#10b981", }, { id: "desert", title: "ژرفا", subtitle: "شناور در اعماق آرام", image: "/unsplash/1501785888041-af3ef285b470.webp", color: "#0369a1", }, ]; interface FluidExpandingGridProps { items?: GalleryItem[]; className?: string; id?: string; } export default function FluidExpandingGrid({ items = ITEMS, className, id = "fluid-gallery", }: FluidExpandingGridProps) { const [layout, setLayout] = useState(() => { const ids = items.map((item) => item.id); return { row1: ids.slice(0, 2), row2: ids.slice(2, Math.min(items.length, 4)), }; }); const handleExpand = (id: string) => { const inRow1 = layout.row1.includes(id); const inRow2 = layout.row2.includes(id); if ( (inRow1 && layout.row1.length === 1) || (inRow2 && layout.row2.length === 1) ) return; if (inRow1) { const neighbor = layout.row1.find((i) => i !== id)!; setLayout({ row1: [id], row2: [neighbor, ...layout.row2.filter((i) => i !== neighbor)].slice( 0, 2 ), }); } else { const neighbor = layout.row2.find((i) => i !== id)!; setLayout({ row1: [neighbor, ...layout.row1.filter((i) => i !== neighbor)].slice( 0, 2 ), row2: [id], }); } }; return (

{items.map((item) => { const isRow1 = layout.row1.includes(item.id); const rowArr = isRow1 ? layout.row1 : layout.row2; const isSelected = rowArr.length === 1 && rowArr[0] === item.id; const gridRow = isRow1 ? 1 : 2; let gridColumn = ""; if (isSelected) { gridColumn = "1 / span 2"; } else { if (isRow1) { gridColumn = layout.row1.indexOf(item.id) === 0 ? "1" : "2"; } else { gridColumn = layout.row2.indexOf(item.id) === 0 ? "1" : "2"; } } return ( handleExpand(item.id)} style={{ gridRow, gridColumn } as React.CSSProperties} className={cn( "group relative h-full w-full cursor-pointer", isSelected ? "z-30" : "z-10" )} transition={{ layout: { type: "spring", stiffness: 100, damping: 25, }, }} >

{item.title} {item.subtitle} ); })}

); }