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.
59 lines • 3.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InteractiveCard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const utils_1 = require("@/components/lib/utils"); // Assuming cn is a utility for conditionally joining class names
const InteractiveCard = ({ children, className, InteractiveColor = "#07eae6ff",
// backgroundColor = "#0c0d16",
// whiteCardBackgroundColor = "#173eff",
borderRadius = "48px", rotationFactor = 0.4, transitionDuration = 0.3, transitionEasing = "easeInOut",
// Add a prop to accept Tailwind background classes
// Example: "bg-gray-900 dark:bg-gray-800"
tailwindBgClass = "bg-transparent backdrop-blur-md", }) => {
const cardRef = (0, react_1.useRef)(null);
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
const x = (0, framer_motion_1.useMotionValue)(0);
const y = (0, framer_motion_1.useMotionValue)(0);
const rotateXTrans = (0, framer_motion_1.useTransform)(y, [0, 1], [rotationFactor * 15, -rotationFactor * 15]);
const rotateYTrans = (0, framer_motion_1.useTransform)(x, [0, 1], [-rotationFactor * 15, rotationFactor * 15]);
const handlePointerMove = (e) => {
const bounds = cardRef.current?.getBoundingClientRect();
if (!bounds)
return;
const px = (e.clientX - bounds.left) / bounds.width;
const py = (e.clientY - bounds.top) / bounds.height;
x.set(px);
y.set(py);
};
const xPercentage = (0, framer_motion_1.useTransform)(x, (val) => `${val * 100}%`);
const yPercentage = (0, framer_motion_1.useTransform)(y, (val) => `${val * 100}%`);
const interactiveBackground = (0, framer_motion_1.useMotionTemplate) `radial-gradient(circle at ${xPercentage} ${yPercentage}, ${InteractiveColor} 0%, transparent 80%)`;
return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: cardRef, onPointerMove: handlePointerMove, onPointerEnter: () => setIsHovered(true), onPointerLeave: () => setIsHovered(false), style: {
perspective: 1000,
borderRadius,
}, className: "relative w-[320px] aspect-[17/21] isolate", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { style: {
rotateX: rotateXTrans,
rotateY: rotateYTrans,
transformStyle: "preserve-3d",
transition: `transform ${transitionDuration}s ${transitionEasing}`,
}, className: "w-full h-full rounded-xl overflow-hidden border shadow-lg", children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "absolute inset-0 rounded-xl z-0", style: {
background: interactiveBackground,
transition: `opacity ${transitionDuration}s ${transitionEasing}`,
opacity: isHovered ? 0.6 : 0,
pointerEvents: "none",
} }), (0, jsx_runtime_1.jsx)("div", {
// Use cn to combine your custom className with the Tailwind background class
// You can also add dark mode classes here
className: (0, utils_1.cn)("relative z-10 w-full h-full", tailwindBgClass, // <--- Apply the Tailwind background class here
className, // Existing class for outer styling
// Example: Add a default text color for contrast
"text-foreground"), style: {
borderRadius, // Keep borderRadius from props
// Remove the direct backgroundColor style application
// as it's now handled by Tailwind classes
}, children: children })] }) }));
};
exports.InteractiveCard = InteractiveCard;
//# sourceMappingURL=interactive-card.js.map