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.
115 lines • 7.1 kB
JavaScript
;
"use client";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = exports.GlowingCards = exports.GlowingCard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const utils_1 = require("@/components/lib/utils");
const GlowingCard = ({ children, className, glowColor = "#3b82f6", hoverEffect = true, ...props }) => {
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("relative flex-1 min-w-[14rem] p-6 rounded-2xl text-black dark:text-white", "bg-background border ", "transition-all duration-400 ease-out", className), style: {
'--glow-color': glowColor, // CSS variable definition
}, ...props, children: children }));
};
exports.GlowingCard = GlowingCard;
const GlowingCards = ({ children, className, enableGlow = true, glowRadius = 25, glowOpacity = 1, animationDuration = 400, enableHover = true, gap = "2.5rem", maxWidth = "75rem", padding = "3rem 1.5rem", backgroundColor, borderRadius = "1rem", responsive = true, customTheme, }) => {
const containerRef = (0, react_1.useRef)(null);
const overlayRef = (0, react_1.useRef)(null);
const [mousePosition, setMousePosition] = (0, react_1.useState)({ x: 0, y: 0 });
const [showOverlay, setShowOverlay] = (0, react_1.useState)(false);
(0, react_1.useEffect)(() => {
const container = containerRef.current;
const overlay = overlayRef.current;
if (!container || !overlay || !enableGlow)
return;
const handleMouseMove = (e) => {
const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
setMousePosition({ x, y });
setShowOverlay(true);
// Using string concatenation for style properties
overlay.style.setProperty('--x', x + 'px');
overlay.style.setProperty('--y', y + 'px');
overlay.style.setProperty('--opacity', glowOpacity.toString());
};
const handleMouseLeave = () => {
setShowOverlay(false);
overlay.style.setProperty('--opacity', '0');
};
container.addEventListener('mousemove', handleMouseMove);
container.addEventListener('mouseleave', handleMouseLeave);
return () => {
container.removeEventListener('mousemove', handleMouseMove);
container.removeEventListener('mouseleave', handleMouseLeave);
};
}, [enableGlow, glowOpacity]);
const containerStyle = {
'--gap': gap,
'--max-width': maxWidth,
'--padding': padding,
'--border-radius': borderRadius,
'--animation-duration': animationDuration + 'ms', // Concatenation
'--glow-radius': glowRadius + 'rem', // Concatenation
'--glow-opacity': glowOpacity,
backgroundColor: backgroundColor || undefined,
...customTheme,
};
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("relative w-full", className), style: containerStyle, children: (0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, utils_1.cn)("relative max-w-[var(--max-width)] mx-auto ", "px-6 py-2"), style: { padding: "var(--padding)" }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex items-center justify-center flex-wrap gap-[var(--gap)]", responsive && "flex-col sm:flex-row "), children: children }), enableGlow && ((0, jsx_runtime_1.jsx)("div", { ref: overlayRef, className: (0, utils_1.cn)("absolute inset-0 pointer-events-none select-none", "opacity-0 transition-all duration-[[var(--animation-duration)]] ease-out"), style: {
// String concatenation for WebkitMask and mask
WebkitMask: "radial-gradient(var(--glow-radius) var(--glow-radius) at var(--x, 0) var(--y, 0), #000 1%, transparent 50%)",
mask: "radial-gradient(var(--glow-radius) var(--glow-radius) at var(--x, 0) var(--y, 0), #000 1%, transparent 50%)",
opacity: showOverlay ? 'var(--opacity)' : '0',
}, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex items-center justify-center flex-wrap gap-[var(--gap)] max-w-[var(--max-width)] center mx-auto", responsive && "flex-col sm:flex-row"), style: { padding: "var(--padding)" }, children: react_1.default.Children.map(children, (child, index) => {
if (react_1.default.isValidElement(child) && child.type === exports.GlowingCard) {
const props = child.props;
const cardGlowColor = props.glowColor || "#3b82f6";
return react_1.default.cloneElement(child, {
className: (0, utils_1.cn)(props.className, "bg-opacity-15 dark:bg-opacity-15", "border-opacity-100 dark:border-opacity-100"),
style: {
...props.style,
// String concatenation for background, border, and boxShadow
backgroundColor: cardGlowColor + "15",
borderColor: cardGlowColor,
boxShadow: "0 0 0 1px inset " + cardGlowColor,
},
});
}
return child;
}) }) }))] }) }));
};
exports.GlowingCards = GlowingCards;
exports.default = exports.GlowingCards;
//# sourceMappingURL=glowing-cards.js.map