lightswind
Version:
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.
34 lines • 2.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InteractiveCardGallery = InteractiveCardGallery;
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("@/components/lib/utils");
const CardItem = ({ title, description, imageSrc, buttonText, buttonLink, imageAlt, accentColor = "yellow", onClick, }) => {
const handleClick = (e) => {
if (buttonLink) {
if (!onClick)
return;
e.preventDefault();
}
onClick?.();
};
return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg group h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-cover bg-center transform transition-transform duration-700 ease-out group-hover:scale-110", style: {
backgroundImage: `url('${imageSrc}')`,
} }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-col items-center text-white p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-bold", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2 italic text-sm", children: description }), (0, jsx_runtime_1.jsx)("button", { className: `mt-4 px-4 py-2 bg-black text-white font-bold text-xs uppercase tracking-wide rounded-lg hover:bg-gray-800 focus:outline-none focus:ring focus:ring-${accentColor}-400`, onClick: handleClick, children: buttonText })] })] }));
};
function InteractiveCardGallery({ cards, className, cardHeight = "h-64", columns = 4, hoverScale = 1.1, transitionDuration = 700, }) {
const getGridCols = () => {
switch (columns) {
case 1: return "grid-cols-1";
case 2: return "sm:grid-cols-2";
case 3: return "sm:grid-cols-2 lg:grid-cols-3";
case 4:
default: return "sm:grid-cols-2 lg:grid-cols-4";
}
};
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(`grid gap-4 p-4 max-w-screen-lg mx-auto ${getGridCols()}`, className), style: {
"--hover-scale": hoverScale,
"--transition-duration": `${transitionDuration}ms`
}, children: cards.map((card, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("group", cardHeight), children: (0, jsx_runtime_1.jsx)(CardItem, { ...card }) }, index))) }));
}
//# sourceMappingURL=interactive-card-gallery.js.map