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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../lib/utils.js';
export const BentoGrid = ({ className, children, }) => {
    return (_jsx("div", { className: cn("mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3", className), children: children }));
};
export const BentoGridItem = ({ className, title, description, header, icon, }) => {
    return (_jsxs("div", { className: cn("group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-neutral-200 bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none", className), children: [header, _jsxs("div", { className: "transition duration-200 group-hover/bento:translate-x-2", children: [icon, _jsx("div", { className: "mt-2 mb-2 font-sans font-bold text-neutral-600 dark:text-neutral-200", children: title }), _jsx("div", { className: "font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300", children: description })] })] }));
};