"use client"; import React, { useState, useRef, useEffect } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { cn } from "@/lib/utils"; import Image from "next/image"; type Card = { id: number; content: JSX.Element | React.ReactNode | string; className: string; thumbnail: string; }; export const LayoutGrid = ({ cards }: { cards: Card[] }) => { const [selected, setSelected] = useState(null); const [lastSelected, setLastSelected] = useState(null); const handleClick = (card: Card) => { setLastSelected(selected); setSelected(card); }; const handleOutsideClick = () => { setLastSelected(selected); setSelected(null); }; return (

{cards.map((card, i) => (

handleClick(card)} className={cn( card.className, "relative overflow-hidden", selected?.id === card.id ? "rounded-lg cursor-pointer absolute inset-0 h-1/2 w-full md:w-1/2 m-auto z-50 flex justify-center items-center flex-wrap flex-col" : lastSelected?.id === card.id ? "z-40 bg-white rounded-xl h-full w-full" : "bg-white rounded-xl h-full w-full" )} layoutId={`card-${card.id}`} > {selected?.id === card.id && }

))}

); }; const ImageComponent = ({ card }: { card: Card }) => { return ( ); }; const SelectedCard = ({ selected }: { selected: Card | null }) => { return (

{selected?.content}

); };

layout-grid

Source Code