lightswind/dist/src/components/ui/bento-grid.js

A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BentoGrid = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@/components/lib/utils");
const BentoGrid = ({ cards, columns = 3, rowHeight = "auto", className, ...props }) => {
    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(`grid w-full gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-${columns} bg-background`, className), ...props, children: cards.map((card, index) => {
            const Icon = card.icon;
            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative overflow-hidden rounded-2xl p-5 flex flex-col justify-end", "h-[15rem]", "bg-white/40 dark:bg-white/5 backdrop-blur-lg", "border border-black/10 dark:border-white/10", "shadow-inner shadow-black/10 dark:shadow-white/10", "text-black dark:text-white", "group transition-all duration-300 ease-in-out", card.className), children: [card.background && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 z-0", children: card.background })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 w-full", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex flex-col justify-end h-full", "opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0", "transition-all duration-300 ease-out"), children: [react_1.default.createElement(Icon, { className: "h-5 w-5 text-current mb-2" }), (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold", children: card.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted-foreground dark:text-white/60", children: card.description })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 transition-all duration-300 group-hover:bg-black/5 dark:group-hover:bg-white/5 rounded-2xl" })] }, index));
        }) }));
};
exports.BentoGrid = BentoGrid;
//# sourceMappingURL=bento-grid.js.map