xlibs-components/dist/components/aceternity/layout-grid.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { motion } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const LayoutGrid = ({ cards }) => {
    const [selected, setSelected] = useState(null);
    const [lastSelected, setLastSelected] = useState(null);
    const handleClick = (card) => {
        setLastSelected(selected);
        setSelected(card);
    };
    const handleOutsideClick = () => {
        setLastSelected(selected);
        setSelected(null);
    };
    return (_jsxs("div", { className: "w-full h-full p-10 grid grid-cols-1 md:grid-cols-3  max-w-7xl mx-auto gap-4 relative", children: [cards.map((card, i) => (_jsx("div", { className: cn(card.className, ""), children: _jsxs(motion.div, { onClick: () => 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}`, children: [selected?.id === card.id && _jsx(SelectedCard, { selected: selected }), _jsx(ImageComponent, { card: card })] }) }, i))), _jsx(motion.div, { onClick: handleOutsideClick, className: cn("absolute h-full w-full left-0 top-0 bg-black opacity-0 z-10", selected?.id ? "pointer-events-auto" : "pointer-events-none"), animate: { opacity: selected?.id ? 0.3 : 0 } })] }));
};
const ImageComponent = ({ card }) => {
    return (_jsx(motion.img, { layoutId: `image-${card.id}-image`, src: card.thumbnail, height: "500", width: "500", className: cn("object-cover object-top absolute inset-0 h-full w-full transition duration-200"), alt: "thumbnail" }));
};
const SelectedCard = ({ selected }) => {
    return (_jsxs("div", { className: "bg-transparent h-full w-full flex flex-col justify-end rounded-lg shadow-2xl relative z-[60]", children: [_jsx(motion.div, { initial: {
                    opacity: 0,
                }, animate: {
                    opacity: 0.6,
                }, className: "absolute inset-0 h-full w-full bg-black opacity-60 z-10" }), _jsx(motion.div, { layoutId: `content-${selected?.id}`, initial: {
                    opacity: 0,
                    y: 100,
                }, animate: {
                    opacity: 1,
                    y: 0,
                }, exit: {
                    opacity: 0,
                    y: 100,
                }, transition: {
                    duration: 0.3,
                    ease: "easeInOut",
                }, className: "relative px-8 pb-4 z-[70]", children: selected?.content })] }));
};