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.
27 lines • 1.48 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const OrbitCard = ({ children, className }) => {
return ((0, jsx_runtime_1.jsxs)("div", { className: `relative ${className} rounded-xl`, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 z-0 flex items-center justify-center rounded-xl bg-background", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute h-full w-full animate-orbit-glow rounded-xl", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-full rounded-xl bg-transparent shadow-[0_0_30px_10px_rgba(59,130,246,0.5)]" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 rounded-xl bg-background p-6 ", children: children }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: `
@keyframes orbit-glow {
0% {
transform: scale(1);
box-shadow: 0 0 30px 10px rgba(59, 130, 246, 0.5);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 40px 20px rgba(59, 130, 246, 0.3);
}
100% {
transform: scale(1);
box-shadow: 0 0 30px 10px rgba(59, 130, 246, 0.5);
}
}
.animate-orbit-glow {
animation: orbit-glow 4s ease-in-out infinite;
}
` } })] }));
};
exports.default = OrbitCard;
//# sourceMappingURL=orbit-card.js.map